JS-JavaScript事件详解

JS运行和编译

语法分析

查找基本语法有没有错误

预解析

执行之前进行预解析
var、function关键字提前到当前作用域的顶部,变量默认值为undefined,函数默认值为函数体代码块,当函数与变量重名时,保留函数。

变量生命周期

全局变量的生命周期直至浏览器卸载页面才会结束。
局部变量只在函数的执行过程中存在,而在这个过程中会为局部变量在栈或堆上分配相应的空间,以存储它们的值,然后再函数中使用这些变量,直至函数结束

事件

用户的行为:onclick、ondblclick、onfocus、onblur、window.onload

是用户跟页面的交互,当用户跟页面进行一些“交流”的时候,页面通过js就会触发一些事件,比如鼠标点击的时候就会触发onclick事件,给这个事件绑定一个函数,那么这个时候函数就会被调用,代码就会被执行

事件类型:

鼠标事件:click,dbclick,mousedown,mouseup,mouseover,mouseout,mouseenter、 mouseleave、mousemove
鼠标滚轮:scroll,mousewheel
鼠标右键(上下文菜单:在不同环境下右键菜单不一样):contextmenu
mouseover:鼠标在元素身上移动穿过子元素的时候会被反复触发
mouseenter:只是在进入元素的时候触发
键盘事件:keydown,keyup,keypress
表单事件:对表单元素操作之后会触发的事件
单选框、多选框、下拉菜单 状态改变的时候会触发 onchange 事件
表单提交的时候会触发 onsubmit ,触发在元素身上

this关键字:事件函数里面的this指的是事件触发对象

事件的原理

事件的原理和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

事件流

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

来源:https://www.icode9.com/content-1-785201.html

(0)

相关推荐

  • 前端开发框架Vue.js巧妙运用修饰符讲解分析

    在本文我就不详细介绍Vue.js是如何给组件绑定事件了的,大家都知道是通过v-on:事件="事件名" 或者它的语法糖 @事件="事件名"前端培训. Vue.js ...

  • JavaScript入门-函数function(二)

    JavaScript入门-函数function(二) 递归函数 什么是递归函数? 递归简单理解就是,在函数体里,调用自己. //我们在求一个10的阶乘的时候,可能会这么做 //写一个循环 var to ...

  • [js] 第63天 举例子说明javascript的变量声明提升和函数声明提升

    今日试题: 举例子说明javascript的变量声明提升和函数声明提升 此开源项目四大宗旨:勤思考,多动手,善总结,能坚持 <论语>,曾子曰:"吾日三省吾身"(我每天多 ...

  • JavaScript面试

    JavaScript面试

  • JS函数和JS DOM

    JS函数和JS DOM所包含的内容JS函数描述JavaScript 函数定义JavaScript函数是通过使用关键字 function 定义的.JavaScript 函数参数JavaScript 函数 ...

  • 前端教程:JavaScript事件

    JavaScript与HTML交互是通过在用户或浏览器操纵页面上发生的事件进行处理. 当页面加载,这是一个事件.当用户点击一个按钮,这一下,也就是一个事件.事件的另一个例子是类似按下任意键,关闭窗口, ...

  • JavaScript事件详解A(兼容性)

      课程大纲  1.事件基础 2.事件处理函数( console.log ); 3.事件对象 4.事件默认行为及阻止方式 5.DOM2级时间处理 6.事件委托机制 我们依次来学习   事件基础  Ja ...

  • JavaScript事件详解B - 坐标

      事件对象常用的属性  当触发某个事件时,会产生一个事件对象,这个对象包含着所有与事件有关的信息.包括导致事件的元素.事件的类型.以及其它与特定事件相关的信息. 通过事件绑定的执行函数是可以得到一个 ...

  • 从历史事件详解周易六十四卦的“卦象”!

    这几年西方的占星术在我们国内很热门,甚至一度超过我们祖祖辈辈最亲近的"四柱八字"和"周易预测". 其实我们中国传统的预测学要比占星术厉害很多,只是国人不懂而已. ...

  • 荣誉的叛国者——德国“720事件”详解(上)

    1944年7月20日,施陶芬贝格上校刺杀希特勒,是被人所周知的15次刺杀希特勒的行动中最为知名的一次.但是,因为德国民众的哲学基因以及二战后两个德国的意识形态的宣传,对"720事件" ...

  • 荣誉的叛国者——德国“720事件”详解(中)

    瓦尔基里 实际上,在1944年7月20日以前,低级国防军将领一共组织了6次刺杀希特勒的行动,前文的"闪电行动"即是其中之一.但是种种刺杀行动要不是因为执行者临时胆怯,要不是由于希特 ...

  • 荣誉的叛国者——德国“720事件”详解(下)

    荣誉的叛国者--德国"720事件"详解(上) 荣誉的叛国者--德国"720事件"详解(中) 事件的后续 炸弹爆炸时,施陶芬贝格上校和费尔吉贝尔将军在后者的办公室 ...

  • 事件详解C - 键盘事件及事件流

      键盘事件  格式:document.键盘事件 1.onkeypress;  按下字符键触发 2.onkeydown;  按下任意键触发 先来看onkeypress和onkeydown: 运行结果如 ...

  • 事件详解D - 默认行为及DOM2事件

      浏览器的默认行为  JavaScript事件本身所具有的属性,例如 a标签的跳转,Submit按钮的提交,右键菜单,文本框的输入等. 阻止默认行为的方式: event.preventDefault ...

  • C# 中的委托和事件(详解)   很不错

    C# 中的委托和事件 委托和事件在 .NET Framework 中的应用非常广泛,然而,较好地理解委托和事件对很多接触 C# 时间不长的人来说并不容易.它们就像是一道槛儿,过了这个槛的人,觉得真是太 ...