JS---DOM---为元素绑定事件的引入，为元素绑定多个代码，兼容代码
1. 为元素绑定事件的引入：
用src直接绑定多个，只实现最后一个（programmer2.js）
<input type="button" value="按钮" id="btn"/>
<script src="common.js"></script>
<script src="programmer1.js"></script>
<script src="programmer2.js"></script>
<script> my$("btn").onclick=function () {
console.log("小杨好帅哦");
};
</script>
2. 为元素绑定多个事件
为元素绑定事件(DOM) :一种, 但是不兼容, 所以还是有两种
2.1 对象.addEventListener("事件类型", 事件处理函数, false); ----->谷歌和火狐支持, IE8不支持
- 参数1:事件的类型---事件的名字,没有on
- 参数2:事件处理函数---函数(命名函数,匿名函数)
- 参数3:布尔类型,目前就写false
//为同一个元素绑定多个相同的事件--
my$("btn").addEventListener("click", function () {
console.log("小苏猥琐啊");
}, false);
my$("btn").addEventListener("click", function () {
console.log("小苏龌龊啊");
}, false);
my$("btn").addEventListener("click", function () {
console.log("小苏邪恶啊");
}, false);
my$("btn").addEventListener("click", function () {
console.log("小苏下流啊");
}, false);
2.2 对象.attachEvent("有on的事件类型", 事件处理函数) ----->谷歌不支持, 火狐不支持, IE8支持
- 参数1:事件类型---事件名字，有on
- 参数2:事件处理函数---函数(命名函数,匿名函数)
my$("btn").attachEvent("onclick", function () {
console.log("小杨好帅哦1");
});
my$("btn").attachEvent("onclick", function () {
console.log("小杨好帅哦2");
});
my$("btn").attachEvent("onclick", function () {
console.log("小杨好帅哦3");
});
3. 为元素绑定事件的兼容代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title> </head>
<body>
<input type="button" value="按钮" id="btn"/>
<script src="common.js"></script>
<script> //为任意元素.绑定任意的事件, 任意的元素,事件的类型,事件处理函数
function addEventListener(element,type,fn) {
//判断浏览器是否支持这个方法
if(element.addEventListener){
element.addEventListener(type,fn,false);
}else if(element.attachEvent){
element.attachEvent("on"+type,fn);
}else{
element["on"+type]=fn;
}
} addEventListener(my$("btn"),"click",function () {
console.log("哦1");
});
addEventListener(my$("btn"),"click",function () {
console.log("哦2");
});
addEventListener(my$("btn"),"click",function () {
console.log("哦3");
}); </script>
</body>
</html>
JS---DOM---为元素绑定事件的引入，为元素绑定多个代码，兼容代码的更多相关文章
- jquery父元素和子元素点击事件传递问题_不可把父元素的事件传递给子元素_事件无限循环传递
前述:jquery中: 当一个元素的点击事件被触发时,会自动将该事件向父级元素逐级专递. 但是实际场景当中,我们可能会遇到需要在父级元素中定义点击事件,来触发特定子元素的点击事件,我就遇到了这么一个问 ...
- jquery绑定事件的坑，重复绑定问题
我实现点击table表格中的删除按钮,找到当前按钮的祖先元素tr 然后删除该行,但是我首先点击删除的时候要先弹出提示框,是否要下载,这时在点击删除按钮删除,之前没有考虑到事件重复绑定问题,所以每次点击 ...
- JS DOM -- 关于回车键盘事件执行事件
一.需求制作一个模拟对话框, 二. 1.需要发送后,输入框清空 2.按enter键可发送 三.代码部分 <!DOCTYPE HTML> <html> <head> ...
- 对jquery新增加的class绑定事件 jquery 对相同class 绑定事件
当页面加载时,就会注册所有的事件,后面通过jquery新增的内容(<div class="item"></div>),再对新增的添加事件$(".i ...
- Jquery Validate根据其他元素的事件来触发单个元素的异步校验
场景:在做一个车辆信息管理模块,而车牌是通过车牌颜色和车牌号码来确定唯一性的,录入车牌信息时需对车牌进行唯一性校验.
- javascript元素绑定事件
js元素绑定事件 想给一个元素绑定一个方法之后,在绑定一个方法而且不被覆盖 window.onload = function () { alert('a'); } window.onlaod=fu ...
- jquery html动态添加的元素绑定事件详解
在实际开发中会遇到要给动态生成的html元素绑定触发事件的情况: <div id="testdiv"> <ul></ul> </div&g ...
- 给js动态创建的对象绑定事件
1.使用原生JS动态为动态创建的对象绑定事件 1-1.创建一个function,用来兼容IE8以下浏览器添加事件 function addEvent(el, type, fn) { if(el.ad ...
- jquery的bind跟on绑定事件的区别
jquery的bind跟on绑定事件的区别:主要是事件冒泡: jquery文档中bind和on函数绑定事件的用法: .bind(events [,eventData], handler) .on(ev ...
随机推荐
- 【HUAWEI Mate30】抽奖啦！华为IoT新福利上线！
华为云OceanConnect IoT云服务包括应用管理.设备管理.系统管理等能力,实现统一安全的网络接入.各种终端的灵活适配.海量数据的采集分析,从而实现新价值的创造. 华为云OceanConnec ...
- 本科阶段就挑战自动驾驶开发？华为云ModelArts帮你轻松实现！
欢迎添加华为云小助手微信(微信号:HWCloud002 或 HWCloud003),输入关键字"加群",加入华为云线上技术讨论群:输入关键字"最新活动",获取华 ...
- HDU5394 Bomb
题目:http://acm.hdu.edu.cn/showproblem.php?pid=5934 There are NN bombs needing exploding. Each bomb ha ...
- 什么是RESTful？RESTfule风格
导读 理解什么是REST之前,先去脑补以下什么是HTTP,参考[Http协议] 什么是REST? REST(英文:Representational State Transfer,简称REST,意思:表 ...
- 基于iCamera测试500w摄像头-mt9p001,mt9p031,mt9p001模块小结 续2
本次使用单色版本,镜头使用近焦镜头,拍摄大约30cm以内的物体和图像 更多原始图像效果,请关注百度云盘 http://pan.baidu.com/s/1cumqia
- git下载问题
官网下载:打不开,可用git for Windows 下载 地址:https://github.com/git-for-windows/git/releases
- 小胖求学系列之-文档生成利器(上)-smart-doc
最近小胖上课总是挂着黑眼圈,同桌小张问:你昨晚通宵啦?小胖有气无力的说到:最近开发的项目接口文档没写,昨晚补文档补了很久,哎,昨晚只睡了2个小时.小张说:不是有生成文档工具吗,类似swagger2.s ...
- python故障排除
在初学 Python 时,想要弄懂 Python 的错误信息的含义可能有点复杂.这里列出了常见的的一些让程序 crash 的运行时错误. 1)忘记在 if , elif , else , for , ...
- CCF-CSP题解 201812-4 数据中心
题目要求最长边最小的生成树.好吧,这就是一道kruskal MST题. #include <bits/stdc++.h> const int maxn = 50000; const int ...
- 微服务架构 SpringBoot（二）
第二天内容:想来想去玩个ssm小demo吧 1.创建表 2..引入相关mybatis 数据库jar: <!--mybatis --> <dependency> <grou ...