js添加事件处理器的几种常见方式

HTML：on事件名 = strCode事件处理函数可直接访问的属性 = 全局属性 + 元素所在form中的属性 + 元素本身的属性

自动的作用域扩展方式相当于：
+

事件处理函数可以直接访问这么多属性，所以，可以这样做：
1
2
3
4

<form method="post">
<input type="text" name="user_name" value="">
<input type="button" value="获取用户名" onclick="alert(user_name.value)">
</form>

DOM0级：elem.on事件名 = functionName/null;

以这种方式添加的事件处理器在冒泡阶段执行，可直接访问的属性 = 全局属性 + 元素本身的属性

DOM2级：（现代浏览器支持的）elem.add/removeEventListener(事件名, functionName, false/true);

false表示在事件冒泡阶段添加，true表示在事件捕获阶段添加。可直接访问的属性同上

时间： 2024-11-09 03:55:53

js添加事件处理器的几种常见方式的相关文章

事件绑定的几种常见方式

在项目开发中,经常遇到绑定事件不起作用,或者事件绑定多次,导致重复触发.为了应对所遇到的问题,上网查阅了一些资料,对事件绑定做了一些系统研究.##1.事件绑定的几种常见方式(以click事件为例) $(selector).click(function(){...}) $(selector).bind("click",function(){...}) $(selector).live("click",function(){...}) $(document).deleg

js添加事件、移除事件、阻止冒泡、阻止浏览器默认行为等写法(兼容IE/FF/CHROME)

网上有关这方面的代码比较多而乱,这里整理一下并加以改进. 添加事件 var addEvent = function( obj, type, fn ) { if (obj.addEventListener) obj.addEventListener( type, fn, false ); else if (obj.attachEvent) { obj["e"+type+fn] = fn; obj.attachEvent( "on"+type, function() {

JS中事件绑定的三种方式

以下是搜集的在JS中事件绑定的三种方式. 1. HTML onclick attribute <button type="button" id="upload" onclick="upload_file();"> 原文: http://www.w3school.com.cn/jsref/jsref_events.asp 2. jQuery .on() $(node).on("change", function(e)

ASP.NET页面间传值的几种常见方式

(新建项目WebApplication,添加新项:源页面Default.aspx和目标页面WebForm1.aspx. 在源页面Default.aspx中添加两个TextBox, ID分别为Nametb和Emailtb,两个Label;在WebForm1.aspx中添加两个Label,ID分别为lname和lemail,用于显示TextBox传过来的值.) 1.使用QueryString 使用QueryString在页面间传递值已经是一种很老的机制了,这种方法的主要优点是实现起来非常简单,然而它

关于vue.js中事件处理器的练习

html: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>事件处理器</title></head><body>   <div id="app-1">

js 添加事件 attachEvent 和 addEventListener 的用法

一般我们在JS中添加事件,是这样子的 obj.onclick=method 这种绑定事件的方式,兼容主流浏览器,但如果一个元素上添加多次同一事件呢? obj.onclick=method1; obj.onclick=method2; obj.onclick=method3; 如果这样写,那么只有最后绑定的事件,这里是method3会被执行,这个时候我们就不能用onclick这样的写法了,主角改登场了,在IE中我们可以使用attachEvent方法 //object.attachEvent(eve

js添加事件监听

1)对于大多数浏览器添加事件监听使用addEventListener(),此函数使用方式为obj.addEventListener('method','function',bool);如添加鼠标点击事件click,移动 mousemove等,第二个参数为调用的方法,第三个参数表示是否需要捕捉,是一个bool值:true表示使用capture,false表示bubbling,一般情况下都是用FALSE;此方法对于相同的函数只绑定一次,也就是说重复绑定相同的函数,只执行一次该方法.当一个对象同一种动

js添加事件通用方法

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p id="p1">测试添加事件:firefox使用addEventListener,ie使用attachEvent<br> 点击此p标签,绑定了2个弹出事件</p>

js添加事件处理程序

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>robot</title> <script> //添加事件处理程序 //传入三个参数分别为事件名称.处理程序.是否要让事件向上传递 window.addEventListener("load", init, false); f