摘要：方式方式方式指向节点对象输出事件对象输出事件对象输出事件对象指向节点对象输出事件对象输出事件对象输出事件对象指向全局对象输出事件对象如果是方式定义的时候也可以没有形参但是被调用的时候一定会传递一个事件对象如果有形参则用接收如果没有可以在函数
hello1//方式1hello2//方式2hello3//方式3
如果是方式1,2,function定义的时候也可以没有evt形参,但是被调用的时候一定会传递一个事件对象,如果有形参evt,则用evt接收,如果没有,可以在函数内直接通过event或arguments[0]访问.
如果是方式3,当是test()调用时,则不会传递事件对象,evt和arguments[0]均输出undefined.如果是test(evt)调用,则传递事件对象,evt和arguments[0]均输出事件对象
以下内容都是基于http://harttle.com/2015/08/14...的总结
事件处理函数中,我们通常使用this来获取当前被操作的对象,但对于不同的事件绑定方式,this可能不一定指代的是当前被操作的对象.常见的事件绑定方式基本上是以下这些:
1.attachEvent: IE9以下(不包括IE9).
2.addEventListener: 支持DOM Level2 Event的浏览器中.
3.el.onclick = function() {}
4.
attachEvent与addEventListener的区别
1.支持的浏览器不同,attachEvent在IE9以下的版本中受到支持,其他的都支持addEventListener.
2.参数不同,addEventListener第三个参数可以指定是否捕获,而attachEvent不支持捕获.
3.事件名不同.attachEvent的第一个参数事件名前要加on.
4.this不同.详情见下
attachEvent方式的事件绑定
attachEvent的this总是指向Window.例如:
el.attachEvent("onclick", function() {
alert(this);
});
脚本设置onclick方式的事件绑定
设置DOM对象的onclick属性，this总是指向被设置的DOM元素。例如：
document.getElementById("id1").onclick = function() {
console.log(this);//...
}
HTML中设置onclick方式的事件绑定
在HTML中设置onclick属性等于让Window调用该函数,于是this总是指向Window.例如:
addEventListener方式的事件绑定
addEventListener的this总是当前正在处理事件的那个DOM对象,DOM Level2 Event Model中提到,事件处理包括捕获阶段/目标阶段/冒泡阶段
图片来源：http://www.w3.org/TR/DOM-Leve...
事件当前正在流过哪个元素,this便指向哪个元素.比如两级的DOM:
点击div#l2后控制台输出为：
l1 capture… l2 target l1 bubbling…
target与currentTarget
addEventListener的事件处理函数中的this不一定指向事实上被点击的元素,但事件处理函数的参数event对象提供了target和currentTarget属性来区分这当前对象和目标对象.我们可以将它们全部输出看看:
l1.addEventListener("click", function(e) {
console.log("l1 capture", this, e.currentTarget, e.target);
});
l2.addEventListener("click", function(e) {
console.log("l2 target", this, e.currentTarget, e.target);
});
l1.addEventListener("click", function(e) {
console.log("l1 bubbling", this, e.currentTarget, e.target);
});
结果是:
l1 capture…… l2 target l1 bubbling……
可见currentTarget总是和this相同,而target指向事实上被点击的目标DOM对象.
关于XMLHttpRequest的兼容性
添加响应事件函数的兼容性
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/81893.html
摘要：下兼容问题，这个最好处理，转化成兼容就可以。暂时还没找到专用的兼容。高度不适应高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用或时。只是目前并不支持。以上都是写中的一些兼容，建议遵循 1.IE8下兼容问题，这个最好处理，转化成ie7兼容就可以。在头部加如下一段代码，然后只要在IE7下兼容了，IE8下面也就兼容了 2.flaot浮动造成IE6下面...
摘要：三创建时发现这么一句话，不知其什么意思，百度如下这样写可以达到的效果是如果安装了，则使用来渲染页面，如果没安装，则使用最高版本的内核进行渲染。 在网站开发中不免因为各种兼容问题苦恼，针对兼容问题，其实IE给出了解决方案Google也给出了解决方案百度也应用了这种方案去解决IE的兼容问题 百度源代码如下 ; 百度一下，你就知道 var wpo={start:new Date*1...
摘要：三创建时发现这么一句话，不知其什么意思，百度如下这样写可以达到的效果是如果安装了，则使用来渲染页面，如果没安装，则使用最高版本的内核进行渲染。 在网站开发中不免因为各种兼容问题苦恼，针对兼容问题，其实IE给出了解决方案Google也给出了解决方案百度也应用了这种方案去解决IE的兼容问题 百度源代码如下 ; 百度一下，你就知道 var wpo={start:new Date*1...
摘要：三创建时发现这么一句话，不知其什么意思，百度如下这样写可以达到的效果是如果安装了，则使用来渲染页面，如果没安装，则使用最高版本的内核进行渲染。 在网站开发中不免因为各种兼容问题苦恼，针对兼容问题，其实IE给出了解决方案Google也给出了解决方案百度也应用了这种方案去解决IE的兼容问题 百度源代码如下 ; 百度一下，你就知道 var wpo={start:new Date*1...
摘要：三创建时发现这么一句话，不知其什么意思，百度如下这样写可以达到的效果是如果安装了，则使用来渲染页面，如果没安装，则使用最高版本的内核进行渲染。 在网站开发中不免因为各种兼容问题苦恼，针对兼容问题，其实IE给出了解决方案Google也给出了解决方案百度也应用了这种方案去解决IE的兼容问题 百度源代码如下 ; 百度一下，你就知道 var wpo={start:new Date*1...
阅读 825·2021-09-22 15:17
阅读 1871·2021-09-22 15:06
阅读 2152·2021-09-08 09:35
阅读 5041·2021-09-01 11:43
阅读 3427·2019-08-30 15:55
阅读 2135·2019-08-30 12:48
阅读 3132·2019-08-30 12:45
阅读 1762·2019-08-29 17:31
