`
hehebendan
  • 浏览: 81762 次
  • 性别: Icon_minigender_1
  • 来自: 伊拉克
社区版块
存档分类
最新评论

JavaScript关于监听器的总结

阅读更多
谈及JavaScript的监听器首先谈到的应该是传统的绑定监听器的方法
要绑定一个监听器有2种方法,一种是静态绑定,一种是动态绑定。
所谓的静态绑定就是我们在具体的一个元素中,定义一个比如:onclick
的属性,让后让它指向一个具体的事件处理的方法,如:<input type="text"
id="first" name="first" onclick="first()"/>
动态绑定就是将方法指针交给比如onclick让他直接执行这个方法比如:
<script type="javascript/text">
document.getElementById("testOne").onclick=first;
关于这两个方法,为什么有动态方法和静态方法之分:
区别:关于静态绑定,它是一个指针执行一个具体的方法,仅仅只是这个指针
执行这个方法了,让后是这个方法的执行,而对于动态绑定,是将方法指针赋值给
了onclick,也就是说onclick指向的就是该方法体了,而静态绑定是一个指针指向
另外一个方法,让后该方法的方法指针指向方法。为了证明这点,我们可以写一个
具体的例子去证明他:
    <html>
<body>
<script>
function first(){
var obj=document.getElementById("first");
  alert(obj==this)
}
</script>
<input type="button" value="点击我" id="first" name="first" onclick="first()"/>
</body>
    </html>
运行这个之后我们看到是false,但是在IE中如果将this调换在==的前面来返回的确是true;在其他的
浏览器中不会,可以说算是IE的一个小BUG吧, 从上面这个例子证明了,静态绑定与动态的具备。
   
后来人们又想到,我们能不能给一个属性,添加多个监听器,但是这是可以实现的,具体是怎么
做的如下:
首先你的得到你要添加的那个属性的事件对象,如:var obj=document.getElementById("first");
然添加,在IE中用这样的方法:obj.attachEvent("onclick",函数); 删除用detachEvent("onclick",函数)
    在其他的浏览器中用: obj.addEventLisener("onclick",函数, true/false); 删除用:
obj.removeEventLisener("onclick",函数,true/false);
    我们在编写HTML的时间不可能只针对某一种浏览器于是可以采用if来判断:
if(document.attachEvent){
      obj.attachEvent(....);
}
else if(document.addEventListener){
         obj.addEventListener(...);
}
采用上面这样通过一个属性来判断是不是当前浏览器支持的,如果不支持就执行下面的,解决了兼容问题
像这样通过一个属性的返回值,我们也常用来判断执行那一条添加。
在事件处理的过程之中,我们往往还看重的处理后的返回值,通过返回值,我们可以改变比如表达什么的
默认行为,例如一个表单,他默认的提交是TRUE,也就是不管怎么样,都要提交,但是有很多的时间
我们不希望把不必要的数据提交过来,比如,注册用户名为非法字符的实际,我们在客服端已经廉政了其不符合要求
这时,我们就可以在处理事件的程序返回false来改变表达的默认行为了。从而达到不符合要求的数据不提交服务器
    谈及到监听器,就不得不说的Event对象了,事务对象是在事务发生的时间创建的,而在IE和其他浏览器
他们的Event对象是有区别的,对于IE来说,Event对象时属于window的一个对象,意味着我们要得到这个对象必须用
var obj = window.event; 而在其DOM ,规定event对象必须作为一个参数传递到事件处理程序中,也就是说
var obj=arguments[0],对于这样,我们可以在绑定监听器的时间就传一个event对象,然后不管哪个浏览器都
可以使用这个EVENT对象了,需要注意的是,绑定监听的实际传的event不是一个形参,名字必须是event这个事件对象
是浏览器帮我们创建的。
最后谈及的就是event对象的属性和行为,在IE中与DOM的不同点:
在IE中得到事件元素用的是oevent.scrElement, DOM中:oevent.target
得到当前的字符的编码:IE: keyCode; Dom : charCode;
阻止事件的默认行为: IE: returnValue() ; DOM: preventDefault();
终止冒泡传递: IE :cancelbubble ; DOM:stopProgation;
分享到:
评论

相关推荐

    Javascript总结导图

    事件是用户或系统的某种交互,JavaScript通过事件监听器来响应这些交互。事件冒泡和事件捕获是事件传播的两种模式,了解它们可以帮助更好地管理事件处理。 11. **ES6及后续版本的新特性** ES6引入了许多新特性,...

    09JavaScript事件总结.docx

    本文主要总结了JavaScript事件的关键概念。 一、事件 事件是用户与浏览器之间交互的瞬间,例如用户点击按钮、输入文本或者鼠标移动等。JavaScript通过监听这些事件来执行相应的功能。常见的事件包括: 1. `onclick`...

    javascript震撼效果大总结

    3. 滚动特效:JavaScript可以通过监听滚动事件来创建出流畅的滚动效果,如视差滚动、平滑滚动、滚动加载等,这些都能极大地提升用户浏览网页时的沉浸感。 4. 响应式设计:JavaScript可以检测设备的特性,如屏幕尺寸...

    html,css,javascript个人自我介绍总结网页.zip

    这份压缩包文件"html,css,javascript个人自我介绍总结网页.zip"显然包含了一个使用这三种技术实现的个人自我介绍网页项目。接下来,我们将深入探讨这三个关键技术及其在网页设计中的应用。 **HTML(HyperText ...

    javascript操作DIV总结(弹出窗口篇)

    在JavaScript中,对DIV的操作主要包括获取元素、修改属性、添加和删除事件监听器,以及动态创建和销毁元素。对于弹出窗口,模态对话框和非模态弹出框的实现主要依赖于CSS和JavaScript的结合使用,浮动窗口则涉及到...

    javascript常用知识点总结

    这通常通过添加事件监听器到复选框,然后更改页面上所有可选元素的`checked`属性来实现。 5. **菜单效果**: JavaScript可以创建交互式的下拉菜单或滑动菜单效果,通过改变CSS样式和处理鼠标事件,例如鼠标悬停时...

    JavaScript高级程序设计学习总结

    事件监听器允许我们响应这些行为。事件循环是JavaScript引擎处理任务的核心机制,包括宏任务和微任务。 10. **正则表达式** 正则表达式是进行字符串匹配和搜索的强大工具,JavaScript提供了`RegExp`对象和相关的...

    javascript软键盘总结

    3. 插入字符:在监听器的回调函数中,根据被点击的按钮获取对应的字符,然后使用JavaScript的`value`属性或`innerHTML`属性更新输入框的内容。 4. 动态显示与隐藏:为了提高用户体验,软键盘应该有一个显示和隐藏的...

    javascript 颜色选择器

    3. **事件监听**:设置事件监听器,响应用户的颜色选择操作,更新选定颜色的值并反馈到页面上。 4. **可访问性**:确保颜色选择器对视力障碍用户友好,例如提供A11Y(无障碍)支持,如通过键盘导航和屏幕阅读器兼容...

    javascript基础教程-总结.docx

    在JavaScript中,事件处理是通过事件监听器或者传统的事件处理程序实现的。例如,你可以用`addEventListener`方法为元素绑定事件处理函数,或使用HTML属性`onclick`在HTML中直接指定点击事件的处理代码。 ...

    JavaScript源代码的简单实时代码编辑器.zip

    这通常通过事件监听器(如`input`或`change`事件)实现,结合`setTimeout`或`requestAnimationFrame`来确保流畅的用户体验。 2. **JavaScript基础**: JavaScript是一种广泛使用的脚本语言,主要应用于Web开发,...

    javascript超级玛丽

    在JavaScript超级玛丽中,这些模块都是用JavaScript编写的,通过事件监听器响应用户的键盘输入,控制马里奥的动作,如跳跃、行走和吃蘑菇。 游戏引擎是游戏的核心,负责游戏的运行逻辑。在JavaScript中,这可能包括...

    Javascript知识总结项目

    这可能涉及到选择元素(querySelector、getElementById、getElementsByClassName等)、元素属性的读写以及事件监听器的添加。 事件处理是用户与网页交互的关键。在这个音乐项目中,可能会有点击播放、暂停、下一首...

    javascript日历选择器

    开发者可以使用纯JavaScript编写代码,手动创建DOM元素,设置样式,添加事件监听器,以构建一个完整的日历选择器。这种方法需要对HTML、CSS和JavaScript有深入理解,但能实现高度定制化。 #### 2. 使用库和框架 ...

    JavaScript程序设计——事件处理实验报告.docx

    - **JavaScript事件注册**:通过`addEventListener`或`attachEvent`(IE浏览器)为元素添加事件监听器,也可以使用HTML属性直接绑定事件处理函数,如`onclick="functionName()"`。 - **事件处理函数**:定义函数来...

    JavaScript结课大作业.zip

    在旅游网站中,可能会有各种点击事件、鼠标悬停事件、表单提交事件等,通过绑定事件监听器,可以实现诸如导航菜单响应、预订按钮的确认操作等功能。 AJAX(Asynchronous JavaScript and XML)是用于创建动态网页的...

    网页javascript脚本语言提取器

    总结来说,"网页JavaScript脚本语言提取器"是开发者和学习者的重要工具,它能够帮助我们深入理解网页背后的JavaScript逻辑,进行有效的测试和分析,提升开发效率和网页性能。对于那些需要从网页中获取或分析...

    Javascript颜色选择器

    总结一下,JavaScript颜色选择器是前端开发中的一个重要组件,它结合了JavaScript的交互性和颜色理论的实用性。通过理解JavaScript的基本原理和颜色选择器的实现机制,开发者可以有效地在网页中集成这一功能,提升...

    javascript知识点总结《三》

    - **事件监听器**:更现代的方法是使用`addEventListener`方法添加事件监听器。 - **示例代码**: ```javascript document.getElementById('elementId').addEventListener('click', function() { alert('元素被...

    JavaScript教程(特效)(chm)

    掌握事件监听器的用法,可以实现更丰富的用户交互。 四、CSS操作 JavaScript可以与CSS结合,动态改变元素的样式,实现各种视觉特效。例如,通过修改元素的透明度、位置或大小来创建动画效果。 五、定时器与延迟 `...

Global site tag (gtag.js) - Google Analytics