js原生添加事件的方式

js原生添加事件的方式:

1. 直接在html标签上添加

<div onclick="alert(‘div‘)">div</div>

2. 用dom的on...方法添加

document.getElementById(‘div‘).onclick = function () {alert(‘div‘)};

3. 用addEventListener或attachEvent添加

document.getElementById(‘div‘).addEventListener(‘click‘, function () {alert(‘div‘)}, false);

原生js事件绑定和事件移除

/**

* @description 事件绑定,兼容各浏览器  

* @param target 事件触发对象

* @param type   事件

* @param func   事件处理函数

*/

function addEvents(target, type, func) {

if (target.addEventListener)    //非ie 和ie9

target.addEventListener(type, func, false);

// addEventListener当然就是注册事件,她有三个参数,分别为:"事件名称", "事件回调", "捕获/冒泡"。最后一个参数是布尔型,true代表捕获事件,false代表冒泡事件。

else if (target.attachEvent)   //ie6到ie8

target.attachEvent("on" + type, func);

else target["on" + type] = func;   //ie5

};

/**

* @description 事件移除,兼容各浏览器  

* @param target 事件触发对象

* @param type   事件

* @param func   事件处理函数

*/

function removeEvents(target, type, func){

if (target.removeEventListener)

target.removeEventListener(type, func, false);

else if (target.detachEvent)

target.detachEvent("on" + type, func);

else target["on" + type] = null;

};

/**btn.removeEventListener("事件名称", "事件回调", "捕获/冒泡");这和绑定事件的参数一样,详细说明下:

·  事件名称,就是说解除哪个事件呗。

·  事件回调,是一个函数,这个函数必须和注册事件的函数是同一个。

·  事件类型,布尔值,这个必须和注册事件时的类型一致。

*/

原生JavaScript事件详解:http://www.cnblogs.com/iyangyuan/p/4190773.html

时间: 2024-10-14 01:58:40

js原生添加事件的方式的相关文章

JS普通添加事件和事件绑定的区别

很简单,看代码. 普通添加事件的方法: var btn = document.getElementById("hello"); btn.onclick = function(){ alert(1); } btn.onclick = function(){ alert(2); } 执行上面的代码只会alert 2 事件绑定方式添加事件: var btn = document.getElementById("hello"); btn.addEventListener(&

js动态添加事件-事件委托

作者:白狼 出处:http://www.manks.top/javascript-dynamic-event.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利. 其所谓的动态添加事件实质就是指js中的事件委托. 我们知道在js中,事件处理只能绑定在当前被选中的元素上,换句话也就是说,事件处理只能绑定在当前文档已经存在的元素上!但是,往往小伙伴们都会遇到一个问题就是,我的元素是后来动态添加到页面的,而我又想给该元素绑定

JS循环添加事件

通常我们会这样给元素添加事件: var ul=document.getElementsByTagName("ul")[0]; var list=document.getElementsByTagName("li"); for(var i=0;i<li.length;i++){ list[i].onclick=function(){ alert("我的index是"+i); } } 但结果往往不是我们想象的那样,它们全部弹出是"我的

js原生触发事件

在JQ时代我们使用如下方式,可以手动触发事件 $("button").click(function(){ $("input").trigger("select"); }); 但是如今的web application 已经淘汰JQ了,原生怎么写呢?很简单 先new一个事件,然后dom.dispatchEvent就可以了 const event = new Event('resize'): window.dispatchEvent(event); 原

js 添加事件 attachEvent 和 addEventListener 的用法

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

JS基础--函数与BOM、DOM操作、JS中的事件以及内置对象

   前   言 絮叨絮叨 这里是JS基础知识集中讲解的第三篇,也是最后一篇,三篇JS的基础,大多是知识的罗列,并没有涉及更难得东西,干货满满!看完这一篇后,相信许多正在像我一样正处于初级阶段的同学,经过初步的学习,会对这一门语言有了一定深入的了解,也会感受到这一门语言的强大之处.希望各位同学通过一定的学习,会得到等大的收获. 因为是最后一篇所以内容可能有点多,希望各位同学能够慢慢看,细细看,让我们一起学习,一起进步,一起感受JS的魅力. 一函数 函数的声明及调用 1.函数的声明格式: func

JS学习五(js中的事件)

[JS中的事件分类] 1.鼠标事件 click/bdlclick/onmouseover/onmouseout 2. HTML事件 onload/onscroll/onsubmit/onchange/onfocus 3. 键盘事件 keydown:键盘按下时触发 keypress:键盘按下并松开时的瞬间触发 keyup:键盘抬起时触发 [注意事项] ①执行顺序:keydown-->keypress-->keyup ②当长按时,会循环执行keydown-->keypress ③有keydo

JEPLUS平台添加JS事件的方式——JEPLUS软件快速开发平台

JEPLUS平台添加JS事件的方式 很多用户在使用平台的过程中有时候会涉及到比较复杂的功能,这些功能利用平台的配置有时候不能实现,这时候可能就需要来编写一些JS事件来完成功能需求的编写,可是很多客户不清楚平台的JS事件应该在什么地方加应该怎么加,今天这篇笔记就说一下平台添加JS事件的几种方式,大家根据自己的业务需求来进行自行添加编写. 一.脚本模板 平台的辅助程序里有很多关于平台的JS事件的一些设置,大家可以去辅助程序里进行查看,操作如图: 二.列表JS事件 打开目标功能的功能菜单的配置界面可以

【原生js】js动态添加dom,如何绑定事件

首先要明白浏览器在加载页面的时候是按顺序来加载的,这样以来就很清楚了,js动态添加dom以后,这些dom并没有绑定事件,这个时候最简单的一个办法就是:将绑定事件的方法封装到一个函数A中,在动态添加完dom以后立即执行一次函数A即可. 需要注意的是,在你可能同事需要添加许多的dom,不要添加一个就执行一次函数A,这样会增加浏览器的负载,你需要在所有dom添加完以后在执行函数A,例如你用一个for循环遍历dom组合并拼接成一个字符串,然后添加到某个父级dom里面,这个时候你需要在循环外添加一次就可以