浏览器有三种添加事件监听的方式。
第一种：直接在标签内写 onclick=“fn”
第二种：在js中 onclick=fn
第三种：在js中 用el.attachEvent或者el.addEventListener()
三种方式添加的事件处理函数运行的scope是不同的，不同浏览器也不尽相同。
IE
- js: el.onclick = fn ,fn的this->el
- 在div标签中 onclick = "fn()" ,fn的this->window
- js: el.attachEvent('onclick',fn); ,fn的this->window
Firefox、Chrome、Opera
- js: el.onclick = fn ,fn的this->el
- 在标签中 onclick = "fn()" ,fn的this->window (相当于执行eval())
- js: el.addEventListener('onclick',fn); ,fn的this->el
可以下载附件或者直接复制一下代码来测试。
<!DOCTYPE HTML>
<html>
<head>
<title>MyHtml.html</title>
<meta http-equiv="content-type" content="text/html; charset=GB2312">
<style type="text/css">
.conclusion{height:200px;}
.highlight{color:#fe6c00}
.experiment{width:200px;height:100px;color:#3164ac;float:left;margin:20px 0px 0px 30px;border:1px solid #eee}
</style>
<script type="text/javascript">
window.id = 'window';
var clickFn = function(){
alert("this指向 "+this.id);
}
window.onload = function(){
document.getElementById("div2").onclick=clickFn; //alert 弹出 div
if(navigator.appName == "Microsoft Internet Explorer"){
document.getElementById("div3").attachEvent('onclick',clickFn); //alert 弹出 window
}else{
document.getElementById("div3").addEventListener('click',clickFn,true);//alert 弹出 div
}
}
</script>
</head>
<body>
<h2>给div添加事件触发程序。请点击下面三个div</h2>
<div class="conclusion">
<p><strong>IE</strong></p>
<ul>
<li>js: el.onclick = fn ,fn的this->el </li>
<li>在div标签中 onclick = "fn()" ,fn的this->window </li>
<li>js: el.attachEvent('onclick',fn); ,fn的this-><i class="highlight">window</i></li>
</ul>
<p><strong>Firefox、Chrome、Opera</strong></p>
<ul>
<li>js: el.onclick = fn ,fn的this->el </li>
<li>在标签中 onclick = "fn()" ,fn的this->window (相当于执行eval())</li>
<li>js: el.addEventListener('onclick',fn); ,fn的this-><i class="highlight">el</i></li>
</ul>
</div>
<div id="div1" class="experiment" onclick="clickFn();">div1 onclick="clickFn();"</div>
<div id="div2" class="experiment">div2 js: onclick = fn</div>
<div id="div3" class="experiment">div3 js: attachEvent/addEventListener</div>
</body>
</html>
请不要吝啬您的意见，谢谢。
相关推荐
js代码-this的指向（模拟7）：DOM事件处理函数的形式
一、事件基础 1.事件函数 obj.on-事件名=fn 定义事件的时候，事件函数不会自动执行，当事件触发的...将事件添加到父元素上，当事件发生时，父元素会找到对应触发事件的子元素去处理，后期添加的子元素，依然有这个事件
接受一个 object 参数，其指定页面的初始数据、生命周期函数、事件处理函数等。 //index.js Page({ data: { text: This is page data., sliderOffset: 0, sliderLeft: 0, state:{ genre:[], genre_index: 0,...
事件绑定的3中常用方法：传统绑定、W3C绑定方法、IE绑定方法。... c、函数体内的this指向的应当是正在处理事件的节点（如当前正在运行事件句柄的节点）； d、监听函数的执行顺序应当是按照绑定的顺序
第二种方式就是将一个函数赋值给一个事件处理程序属性。这种方式首先的获取到这个元素对象，一般代码如下： 代码如下: <input id=”myEventHandlerScope” type=”button” value=”单击我”/
本文实例讲述了JavaScript实现为事件句柄绑定监听...a、传统的绑定方法，非常简单稳定，函数体内的this指向的也是指向正在处理事件的节点（如当前正在运行事件句柄的节点）。 b、一个元素的一个事件句柄只能注册一个函
由此可以看出，Qt的事件处理实际上是分层五个层次：重定义事件处理函数，重定义event()函数，为单个组件安装事件过滤器，为QApplication安装事件过滤器，重定义QCoreApplication的notify()函数。这几个层次的控制权...
本文实例讲述了JavaScript为事件句柄绑定监听...a、传统的绑定方法，非常简单稳定，函数体内的this指向的也是指向正在处理事件的节点（如当前正在运行事件句柄的节点）。 b、一个元素的一个事件句柄只能注册一个函数，
复制代码 代码如下:‘This is a test’.replace(‘is’,’are’) 四、split:将字符串分割成序列 复制代码 代码如下:‘1+2+3+4+5’.split(‘+’) 默认程序将所有空格作为分隔符。 五、strip:返回去除两侧(不包括内部)...
自定义的事件处理函数即被压入这个列表中。 在事件触发的时候，通过注册的匿名函数来执行 jQuery.event.handle ，由于使用了闭包，所以在这个函数中的 this 就是事件源对象，通过这个事件源对象找到对象的私有扩展...
} 这样，函数和数据成员都是用“this.”来实现。 我们自己定义一个简单类student好了，然后再去构造它，并且实现一个输出函数。 代码如下: [removed] <!– function student(a,b){ this.name = a; this.age=b; ...
传统方式 element.onclick = function(e){ ...新绑定的事件处理函数会覆盖旧的事件处理函数 事件对象参数(e)仅非IE浏览器可用 W3C方式 element.addEventListener('click', function(e){ // ... }, f
什么是柯里化 柯里化是这样的一个转换过程，把接受多个参数的函数变换成接受一个单一参数(译注：...bind方法的作用：把传递进来的callback回调方法中的this预先处理为上下文context; bind方法实现原理1代码如下所示：
13.6.4 表单和onFocus、onBlur事件处理函数 13.6.5 表单和onChange事件处理函数 13.6.6 表单和onSubmit事件处理函数 13.6.7 HTML事件处理函数和JavaScript事件方法 13.6.8 onError事件 ...
用于监听事件的net.Server事件处理程序 目录 笔记 预计this绑定到服务器实例 希望server.address()是可调用的函数 安装 npm install net - server - events - listening api /** * @returns { undefined } */ ...
}).catch(err => { //请求失败后的处理函数 console.log(err) }) //方法二传递参数 this.$http.get('https://cnodejs.org/api/v1/topics?page=1&limit=15')注意请求成功后的处理使用了箭头函数，因此在该函数内的...
这个函数在处理文本数据、文件路径、URL等场景时非常有用。 1. 使用默认分隔符 当不指定 sep 参数时，split() 函数会根据所有的空字符（包括空格、换行、制表符等）来分割字符串。 python # 示例：使用默认分隔符...
而在控制器的代码中，程序员也可以自由的发出各种事件，比如通过抛出消息来调用其他控制器的事件回调函数。 类比于WEB编程的MVC思想，在嵌入式代码中，我们需要处理数据存储（Data）、输入输出（IO）、控制器...