喜迎
春节

JS事件2


事件的原理

事件的原理和hover类似。可以做到:hover做不到的事,:hover只能操作当前的元素,但是事件绑定之后可以选择任何元素。

事件触发三要素:通过谁触发? 通过什么触发?触发后要做什么?

事件的写法:

w3c标准:事件写在行内,但是因为结构和行为要分离,所以我们一般情况下用JavaScript的方法来绑定事件,只有再极少数情况下,才将事件写在行内,事件的绑定方法:

 浏览器中的节点(对象).on+事件句柄 = function( ){

      干什么?(放在浏览器中,不执行,当事件发生的时候再执行。)

 }

 oDiv.onclick=function(){     
      alert(1)
 }

事件总结:事件是给浏览器定义一个预处理函数,当事件触发的时候,执行函数,这就是事件。

当事件被触发的时候奥特曼会得到一个信息(事件对象),包含了跟事件相关的一些属性和方法的封装(如:事件发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态等),只有事件在触发的时候才会得到。

 oDiv.onmousedown=function(e){
      alert(e);
 }

JS缺德定律:事件对象有兼容问题;
所以我们先做好兼容再去使用事件对象:

e=e || window.event;

alert (e.buttons)观察.buttons的返回值;

鼠标事件及方法;

e.buttons
返回鼠标点击按键(1左键,2右键,4中键滚轮)

e.offsetX / offsetY
获取事件触发最近的盒子(事件源)的坐标

e.clientX / clientY
获取可视区的坐标(根据浏览器的定位)

e.screenX / screenY
获取整个屏幕的坐标

e.pageX / e.pageY
获取文档的坐标(包含滚动条)

键盘事件:keydown、keyup、keypress

document.onkeydown = function(e){
console.log(e.keyCode)
}
键盘上每一个键都有一个唯一的编码,用来识别当前用户正在操作的是键盘上哪一个键

有兼容问题
e.keyCode || e.which

特殊键码:是否按下alt ctrl 和 shift
e.altKey

e.ctrlKey

e.shiftKey

返回值是布尔值;

可以用来判断组合键

if(e.keyCode==13&&e.altKey){
alert(‘同时按下了enter和alt’);
}

默认行为(浏览器)

有一些html元素默认的行为,比如说a标签,点击后有跳转动作;form表单中的submit类型的input有一个默认提交跳转事件;reset类型的input有重置表单行为。

但是,有些时候我们是不需要默认事件的,所以就需要阻止默认事件

return false;

if(e.preventDefault) {
   e.preventDefault();
}else {
    window.event.returnValue = false;    
    //return false;
}

1、右键菜单(上下文菜单) oncontextmenu
2、表单提交事件 onsubmit

事件流

子元素的事件被触发时,父级也会被触发(冒泡)
一个完整事件流包含 捕获阶段 —-> 目标阶段 —->冒泡阶段


文章作者: NekoDeng
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 NekoDeng !
评 论
 上一篇
JS事件流
JS事件流
事件冒泡Netscape认为,石头先扔进河里,再从河里确定了一个扔石头的点,从外往内逐渐精确的过程(捕获) w3c认为,石头扔进去先到达准确的那个点,涟漪从内往外扩散(冒泡) 事件流:事件执行的顺序 子元素的事件被触发时,父级也会被触发(冒
2020-07-20
下一篇 
JS事件
JS事件
JS运行和编译语法分析查找基本语法有没有错误 预解析执行之前进行预解析var、function关键字提前到当前作用域的顶部,变量默认值为undefined,函数默认值为函数体代码块,当函数与变量重名时,保留函数。 变量生命周期全局变量的生命
2020-07-15
  目录