浏览器有三种添加事件监听的方式。
第一种：直接在标签内写 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>
请不要吝啬您的意见，谢谢。
相关推荐
由于事件处理函数现在会处理多个控件的事件，我们需要在函数内部区分触发事件的控件。`sender`参数就是用来实现这个功能的。它是一个`Object`类型，可以通过类型转换获取具体控件的信息。例如，我们可以检查控件的...
这里的描述暗示，这个事件处理函数的其他规则与`bind()`类似，可能是指它也能改变`this`的指向。 3. **事件对象**： 当事件触发时，浏览器会创建一个事件对象，这个对象包含了关于事件的所有信息，如事件类型、...
例如，下面的代码中，`onclick`事件处理函数可以访问到`this`（即`<input>`元素）和`document`的`compatMode`属性： ```html (compatMode);"> ``` 但是，这个作用域链在不同浏览器中可能存在差异。例如，某些...
在DOM（文档对象模型）事件处理函数中，`this`的指向问题尤为常见。我们通过分析`main.js`中的代码和`README.txt`中的说明，可以深入探讨这个主题。 首先，`this`的指向主要取决于函数是如何被调用的。在JavaScript...
在早期版本的Vue（v1.x）中，`ready`事件处理函数是一个重要的生命周期钩子，它会在组件挂载完成后被调用，即当组件实例的`el`选项绑定的DOM元素被插入到文档中时。然而，在Vue的最新版本（v2.x及以上）中，`ready`...
在事件处理函数中，React会传入一个事件对象（`event`），它包含了关于触发事件的信息。例如，你可能需要获取点击元素的值： ```jsx const handleClick = (event) => { console.log('Clicked value:', event....
3. 在事件处理函数中，this关键字指向当前事件的目标对象。 4. 在setTimeout函数中，this关键字指向global对象。 为了正确地使用$(this)对象，我们需要了解JavaScript中this关键字的使用规则，并且正确地使用变量来...
在这个例子中，我们创建了一个名为`MainForm`的窗体，并在其构造函数中注册了`KeyDown`和`KeyUp`事件的处理函数。当用户按下或释放功能键时，对应的事件处理函数会被调用，并打印出被按下的功能键。 然而，需要注意...
`bind()`是jQuery中用于绑定事件处理函数的核心方法，对于初学者来说，掌握这个方法是理解jQuery事件处理的关键。 `bind()`方法的基本语法如标题和描述中所述：`bind(type, [data], fn)`。这里，`type`是一个或多个...
4. **事件绑定方法**：在事件处理函数中，`this`通常指向触发该事件的元素。例如： ```html 按钮 var btn = document.getElementById('btn'); btn.onclick = function() { console.log('this:', this); } ...
CCmdTarget 对 OnCmdMsg 的默认实现是在当前命令目标 (this 所指 ) 的类和基类的消息映射数组里搜索指定命令消息的消息处理函数（标准 Windows 消息不会送到这里处理）。如果找到了一个匹配的消息映射条目，则使用 ...
在Qt框架中，`update()`函数和`paintEvent()`事件是进行界面绘制和更新的核心机制。本文将深入探讨这两个概念，以及它们如何协同工作来实现动态用户界面。 首先，我们来理解`update()`函数。在Qt中，所有的窗口部件...
为了优化性能，可以在构造函数中预先绑定事件处理函数，如`this.handleClick = this.handleClick.bind(this)`。这样，事件处理函数在组件实例化时就已确定，避免了每次渲染时的额外操作。 5. **使用`.bind()`或...
4. **事件绑定方法**：在事件处理程序中，`this`指向触发事件的元素。例如： ```html <button id="btn">Click me var btn = document.getElementById('btn'); btn.onclick = function() { console.log('this:', ...
在事件处理函数中，this通常指向触发事件的元素。因此，在使用onclick时，this指的就是被点击的那个元素本身。 在示例代码中，定义了一个名为test的函数，该函数接收一个参数obj。这个obj参数代表的就是触发事件的...
这种机制在处理异步操作或事件驱动的程序时特别有用。例如，在Windows编程中，很多API接口都需要传入一个回调函数，以便在某些特定事件发生时执行特定的操作。 #### 二、Windows中回调函数的特点 在Windows环境下...
1. 作为事件处理函数：箭头函数可以作为事件处理函数，简洁地处理事件响应。 2. 作为回调函数：箭头函数可以作为回调函数，传递给其他函数作为参数。 3. 作为高阶函数：箭头函数可以作为高阶函数，传递给其他函数...
当函数作为对象的方法被调用时，例如在某个HTML元素的事件处理函数中，this的值会指向该方法所属的对象。如在代码element.onclick=dosomething中，dosomething()函数被赋值给element的onclick事件处理器。当这个事件...