1. 监听事件操作方式
-
新版本监听操作
element . addElementListrner( '事件' ， 回调函数，事件流（false/true） )
-
老版本监听操作
element . attachEvent（'事件' ， 回调函数，事件流（false/true））
封装兼容老版本监听代码
function addEventListener(element, evenName, fn) {
// 判断当前浏览器是否支持addEventListener方法
if (element.addEventListener) {
element.addEventListener(evenName, fn); //i第三个参数默认就是false
} else if (element.attachEvent) {
element.attachEvent("on" + evenName, fn);
} else {
// 相当于element.onclick = fn
element["on" + evenName] = fn;
}
}2. 删除事件
传统：元素.事件 = null
div[0].onclick = function () {
alert(11);
// 2.传统方式解绑事件
div[0].onclick = null;
};
新方法 ： 元素.remove监听事件
div[1].addEventListener("click", fn); //里面的fn不需要调用（）
// 如果要删除要把监听器写在外面
function fn() {
alert(22);
// 2.新方法删除事件
div[1].removeEventListener("click", fn);
}
旧版本： 元素.datachEvaent事件
div[2].attachEvent("onclick", fn1);
function fn1() {
alert(333);
// 2.解绑注册事件
div[2].detachEvent("onclick", fn1);
}3. DOM事件流
-
作用在注册事件的第三个参数（true是捕获，false是冒泡）
-
js代码中只能执行捕获或者冒泡
-
捕获阶段：从document往下执行一直执行到当前元素
-
冒泡阶段：从当前元素依次执行到document
4. 代码执行事件流
多个监听事件之间的执行顺序效果
-
js代码中只能执行捕获或者冒泡其中的一个阶段
-
onclick和attachEvent（传统事件和旧事件）只能得到冒泡事件
-
实际开发: 捕获事件> 事件冒泡
4. 没有冒泡的事件
- 鼠标移动/移除事件
- 鼠标焦点获取/失去
5. 事件对象
事件发生后，事件相关的一些列信息数据的集合都放在这个对象里面，这个对象就是事件对象event（ent），他有很多属性和方法
兼容处理：e = e || windows.event
6. 事件对象常见的属性和方法
返回触发对象 ： e.target =>事件委托中使用
- 返回触发绑定元素 ： this
返回绑定事件的元素： e.currentTarget
div.addEventListener("click", function (e) {
console.log(e.target); //因为绑定时div点击也是div所以返回值就是div
// 2.this返回的是绑定事件的对象（元素）
console.log(this); //因为绑定时div点击也是div所以返回值就是div
});
var ul = document.querySelector("ul");
ul.addEventListener("click", function (e) {
// 给ul绑定事件
console.log(this); //返回ul
// this的类似属性
console.log(e.currentTarget); //返回ul
console.log(e.target); //返回的是li
});
e.type 事件类型
div.addEventListener("click", fn); //执行调用直接返回事件事件属性
function fn(e) {
console.log(e.type);
}
- e.preventDefault（） 阻止事件默认效果（新版）
- e.returnValue 阻止事件默认效果（旧版）
// 传统注册阻止也可以实现
a.onclick = function (e) {
e.preventDefault(); //属性
// 低版本阻止
e.returnValue; //方法
// return false也可以阻止：无兼容：但是会导致后面代码无法执行；而且仅限于传统注册
return false; //不采用
}; a.addEventListener("click", function (e) {
// 高版本阻止
e.preventDefault();
});
- e.stopPropagation() 新版阻止冒泡
- e.cancelBubble = true ie 中取消冒泡
设置兼容
son.addEventListener("click", function (e) {
alert("son");
// 高版本
e.stopPropagation(); //不再往后传播
// 低版本ie
e.cancelBubble = true;
// 兼容处理
if (e && e.stopPropagation) {
e.stopPropagation();
} else {
window.event.cancelBubble = true;
}
});7. 事件委托、代理
效果：当ul设置点击事件，但是事件对象可以通过target属性返回当前点击子元素
解释：相当于不用单独给当前子元素设置点击事件（优势）
<ul>
<li>好好学习，天天向上</li>
<li>好好学习，天天向上</li>
<li>好好学习，天天向上</li>
<li>好好学习，天天向上</li>
<li>好好学习，天天向上</li>
</ul>
<script>
// 事件委托原理：
// 给父节点添加监听器，利用事件冒泡影响每一个子节点
var ul = document.querySelector("ul");
ul.addEventListener("click", function (e) {
// alert("好好学习天天向上");
// e.target 可以获得点击的对象
e.target.style.backgroundColor = "red";
});
</script>8. 页面中禁止选中文本
document.addEventListener('contextmenu',function(e){ e.preventDefault(); })
- 此处表示禁止鼠标右键执行
document.addEventListener（'selectstart',function(e){ e.preventDefault(); }）
- 此处禁止选中文字
9. 鼠标事件对象
<script>
document.addEventListener("click", function (e) {
// 1.可视区域范围
// 不论有没有滚动页面：返回的都是可视区域的坐标
console.log(e.clientX);
console.log(e.clientY);
// 2.文档页面范围（使用较多）
console.log(e.pageX);
console.log(e.pageY);
// 3.整个显示器范围
console.log(e.screenX);
console.log(e.screenX);
});
</script>
10. 案例-鼠标跟随键盘移动 （添加定位）
<script>
var pic = document.querySelector("img");
document.addEventListener("mousemove", function (e) {
// 1.mousemove:鼠标移动1px就会触动
// 2.获取鼠标在页面中的坐标
var x = e.pageX;
var y = e.pageY;
console.log("x是" + x + ",y是" + y);
// 3.注意位置的px单位
pic.style.top = y - 40 + "px";
pic.style.left = x - 50 + "px";
});
</script>-
执行效果：鼠标移动到窗口哪个位置gif图就移动到哪个位置
-
代码解析：
- 获取到gif元素
- 设置鼠标移动事件：mouseover
- 声名事件对象当前相对于文档页面的位置：e.pageX/Y
- 修改当前定位位置：如果需要鼠标居中到图片就进行微调
11. 键盘事件
执行顺序
-
keydown
document.onkeydown = function () { console.log("弹起来了"); }; document.addEventListener("keydown", function () { console.log("哈哈"); }); -
keypress
document.onkeypress = function () { console.log("弹起来了"); }; document.addEventListener("keypress", function () { console.log("哈哈"); }); -
keyup
document.onkeyup = function () { console.log("弹起来了"); }; document.addEventListener("keyup", function () { console.log("哈哈"); });
12. 常用键盘对象属性
e.keyCode：区分ASCII值
- onkeydown和onkeyup：不区分大小写；onpress区分
- 在实际开发中，更多是使用keyup和keydown，能识别所有键
- keypress不识别功能键，但是keyCode属性能区分大小写，返回不同的ASCII值
document.addEventListener("keyup", function (e) { // 可以通过输出检测当前的键入对象ASCII值 console.log("此时按下键的值是" + e.keyCode); if (e.keyCode === 65) { alert("您按下的是a键"); } else { alert("按下的不是a键"); } });
13. 案例-焦点获取
<input type="text" name="" id="" /> <script> // 点击s获取焦点 var search = document.querySelector("input"); document.addEventListener("keyup", function (e) { // 测试到s的ascii值打印 console.log(e.keyCode); //83 if (e.keyCode === 83) { search.focus(); } }); </script>
-
执行效果：按下指定按键，input获取焦点
-
代码分析：
- 获取到input元素
- 设置键盘按下事件
- 首先查看自定义键盘的ASCII值
- 直接进行判断：执行获取焦点
14. 案例-放大镜文字效果
// 1.检测输入
jd_input.addEventListener("keyup", function () {
// console.log("输入内容");
if (this.value == "") {
con.style.display = "none";
} else {
con.style.display = "block";
con.innerHTML = this.value;
}
});
// 失去焦点隐藏con
jd_input.addEventListener("blur", function () {
con.style.display = "none";
});
// 获得焦点:盒子出现
jd_input.addEventListener("focus", function () {
if (this.value != "") {
con.style.display = "block";
}
});
-
执行效果：
- 键盘键入如果没有任何就不显示放大镜，如果输入任何内容显示放大镜
- 在以上基础上获取到焦点就会显示放大镜
- 如果没货的焦点就会隐藏放大镜
1346
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
