js为标签添加事件的方式和区别

js为标签添加事件的3种方式

// 方法一 函数表达式
dom.onclik = function(){/* 代码 */
}
// 方法二 添加事件
div.addEventListener('click', function(){/* 代码 */
})
// 方法三 在html标签中添加相应的函数
function funName(){/* 代码 */
}
<tag onclik="funName()">text</tag>

3种方式区别

我们已代码为切入点

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>test</title>
</head><body><div id="div" onclick="funName()">点击我吧</div>
</body><script>function funName(){console.log("funName")}let div = document.getElementById("div")div.addEventListener('click', function(){console.log("addEventListener1")})div.addEventListener('click', function(){console.log("addEventListener2")})div.onclick = function(){console.log("123456")}div.onclick = function(){console.log("7895526")}</script>
</html>

结果:
然后通过多次的自定义函数的顺序可以得出以下结论:
- 如果只存在方法三在html标签中添加相应的函数则运行方法三函数
- 如果存在方法三在html标签中添加相应的函数还有其他方法，则运行其他方法的函数
- 如果方法二添加事件添加了多个，则依次按添加顺序运行这多个函数
- 如果方法一函数表达式添加了多个，则运行最后添加的函数
- 如果方法一函数表达式和方法二添加事件同时存在先运行方法一函数表达式后运行方法二添加事件

js为标签添加事件的方式和区别相关推荐

使用js设定标签属性，利用循环遍历给标签添加事件
设定标签属性给标签添加属性语法标签对象.setAttribute('属性名称' , 属性值); 一次只能定义一个属性,如果要定义多个属性,要执行多次.例如: 标签对象.setAttribute( ...
js给数组添加数据的方式/js 向数组对象中添加属性和属性值
参考:https://www.cnblogs.com/ayaa/p/14732349.html js给数组添加数据的方式有以下几种: 直接利用数组下标赋值来增加(数组的下标起始值是0) 例,先存在一个 ...
【转】jQuery中的bind(),live(),delegate(),on()事件绑定方式的区别
bind() ...
php变量和js变量的区别吗,JS声明变量的3种方式和区别
JavaScript 是弱类型语言,可以不需要声明变量而直接使用.这样虽然简单但不易发现变量名方面的错误,所以不建议这样做.通常的做法是在使用 JavaScript 变量前先声明变量.目前,JavaS ...
html事件中写js,html标签中绑定触发事件与js中绑定触发事件写法上的区别
html> js中方法名后加括号和不加口号的区别按钮 var test = function(){ var span = document.createElement("span&q ...
js给标签添加属性和值_jquery节点属性
一.节点操作 1.DOM内容节点操作: ①innerHTML属性:设置或获取文本的内容(普通文本和标签). ②innerText属性:设置或获取文本的内容(普通文本),存在兼容性问题. 2.j ...
js给标签添加class
①先自定义class样式 .tabFirst_selected { border: 2px solid #0066cc; border-left: 3px solid #0066cc; } ② ...
问题：jquery给标签添加事件，但标签还未加载会成功吗
之后研究解决转载于:https://www.cnblogs.com/sz-toosimple/p/11170912.html
JS获取对象属性的各种方式和区别（自身/原型属性、可枚举/不可枚举）
对象的属性有自身属性和原型属性之分,自身属性是对象自己的属性,原型属性是存在于原型链上的属性. 可以用Object.prototype.hasOwnProperty()判断是自身属性还是原型属性.(i ...

js为标签添加事件的方式和区别

js为标签添加事件的3种方式

3种方式区别

js为标签添加事件的方式和区别相关推荐

最新文章

热门文章