首页 > 其他分享 >第二十四章:事件入门

第二十四章:事件入门

时间:2023-04-26 16:37:48浏览次数:29  
标签:function 触发 Lee 事件处理 入门 alert 事件 input 第二十四章


 学习要点:
1.事件介绍
2.内联模型
3.脚本模型
4.事件处理函数

JavaScript 事件是由访问 Web 页面的用户引起的一系列操作,例如:用户点击。当用户执行某些操作的时候,再去执行一系列代码。
一.事件介绍
事件一般是用于浏览器和用户操作进行交互。最早是 IE 和 Netscape Navigator 中出现,作为分担服务器端运算负载的一种手段。 直到几乎所有的浏览器都支持事件处理。 而 DOM2级规范开始尝试以一种复合逻辑的方式标准化 DOM 事件。IE9、Firefox、Opera、Safari 和Chrome 全都已经实现了“DOM2 级事件”模块的核心部分。IE8 之前浏览器仍然使用其专有事件模型。
JavaScript 有三种事件模型:内联模型、脚本模型和 DOM2 模型。
二.内联模型
这种模型是最传统接单的一种处理事件的方法。 在内联模型中, 事件处理函数是 HTML标签的一个属性,用于处理指定事件。虽然内联在早期使用较多,但它是和 HTML 混写的,并没有与 HTML 分离。
//在 HTML 中把事件处理函数作为属性执行 JS 代码
<input type="button" value="按钮" οnclick="alert('Lee');" /> //注意单双引号
//在 HTML 中把事件处理函数作为属性执行 JS 函数
<input type="button" value="按钮" οnclick="box();" /> //执行 JS 的函数
PS:函数不得放到 window.onload 里面,这样就看不见了。
三.脚本模型
由于内联模型违反了 HTML 与 JavaScript 代码层次分离的原则。为了解决这个问题, 我们可以在 JavaScript 中处理事件。这种处理方式就是脚本模型。


var input = document.getElementsByTagName('input')[0]; //得到 input 对象
input.onclick = function () { //匿名函数执行
alert('Lee');
};



 
PS:通过匿名函数,可以直接触发对应的代码。也可以通过指定的函数名赋值的方式来执行函数(赋值的函数名不要跟着括号)。
input.onclick = box; //把函数名赋值给事件处理函数
四.事件处理函数
JavaScript 可以处理的事件类型为:鼠标事件、键盘事件、HTML 事件。
JavaScript 事件处理函数及其使用列表

第二十四章:事件入门_赋值


第二十四章:事件入门_javascript_02


 

PS: 所有的事件处理函数都会都有两个部分组成, on + 事件名称, 例如 click 事件的事件处理函数就是: onclick。在这里,我们主要谈论脚本模型的方式来构建事件,违反分离原则的内联模式,我们忽略掉。
对于每一个事件, 它都有自己的触发范围和方式, 如果超出了触发范围和方式, 事件处理将失效。
1.鼠标事件,页面所有元素都可触发
click:当用户单击鼠标按钮或按下回车键时触发。



input.onclick = function () {
alert('Lee');
};


 
dblclick:当用户双击主鼠标按钮时触发。


input.ondblclick = function () {
alert('Lee');
};


 
mousedown:当用户按下了鼠标还未弹起时触发。



input.onmousedown = function () {
alert('Lee');
};



 
mouseup:当用户释放鼠标按钮时触发。



input.onmouseup = function () {
alert('Lee');
};



 
mouseover:当鼠标移到某个元素上方时触发。


input.onmouseover = function () {
alert('Lee');
};


 
mouseout:当鼠标移出某个元素上方时触发。



input.onmouseout = function () {
alert('Lee');
};



 
mousemove:当鼠标指针在元素上移动时触发。



input.onmousemove = function () {
alert('Lee');
};


 
2.键盘事件
keydown:当用户按下键盘上任意键触发,如果按住不放,会重复触发。



onkeydown = function () {
alert('Lee');
};


 
keypress:当用户按下键盘上的字符键触发,如果按住不放,会重复触发。



onkeypress = function () {
alert('Lee');
};


 
keyup:当用户释放键盘上的键触发。



onkeyup = function () {
alert('Lee');
};



 
3.HTML 事件
load: 当页面完全加载后在 window 上面触发, 或当框架集加载完毕后在框架集上触发。



window.onload = function () {
alert('Lee');
};



 
unload:当页面完全卸载后在 window 上面触发,或当框架集卸载后在框架集上触发。



window.onunload = function () {
alert('Lee');
};



 
select:当用户选择文本框(input 或 textarea)中的一个或多个字符触发。



input.onselect = function () {
alert('Lee');
};



 
change:当文本框(input 或 textarea)内容改变且失去焦点后触发。



input.onchange = function () {
alert('Lee');
};



 
focus:当页面或者元素获得焦点时在 window 及相关元素上面触发。



input.onfocus = function () {
alert('Lee');
};


 
blur:当页面或元素失去焦点时在 window 及相关元素上触发。



input.onblur = function () {
alert('Lee');
};



 
submit:当用户点击提交按钮在<form>元素上触发。



form.onsubmit = function () {
alert('Lee');
};



 
reset:当用户点击重置按钮在<form>元素上触发。



form.οnreset= function () {
alert('Lee');
};



 
resize:当窗口或框架的大小变化时在 window 或框架上触发。



window.onresize = function () {
alert('Lee');
};



 
scroll:当用户滚动带滚动条的元素时触发。


window.onscroll = function () {
alert('Lee');
};

 

标签:function,触发,Lee,事件处理,入门,alert,事件,input,第二十四章
From: https://blog.51cto.com/u_16089934/6228124

相关文章

  • 国企数字化转型六大困境+原因剖析+典型事件
    导读为进一步落实国务院国资委《关于加快推进国有企业数字化转型工作的通知》,点亮智库联合中国企业联合会、北京国信数字化转型技术研究院、中核集团、航空工业集团、国家电网等40余家央国企、行业协会、科研机构、服务企业等单位,就国有企业数字化转型发展指数与方法路径进行了课题......
  • 国企数字化转型六大困境+原因剖析+典型事件
    导读为进一步落实国务院国资委《关于加快推进国有企业数字化转型工作的通知》,点亮智库联合中国企业联合会、北京国信数字化转型技术研究院、中核集团、航空工业集团、国家电网等40余家央国企、行业协会、科研机构、服务企业等单位,就国有企业数字化转型发展指数与方法路径进行了课......
  • Kotlin基础入门 - 创建、兼容一个属于自己的Kotlin项目
    这应该是我年前就想记录的一个基础入门,但是因为一直比较忙,当时只是做了一个备忘草稿,正文就拖到了现在,趁着有时间,赶紧来帮助一下新入行的朋友…关于为何我把这篇Blog叫做创建、兼容一个属于自己的Kotlin项目?主要是因为在实际开发中会遇到以下俩种项目场景><从0-1的Kot......
  • Kotlin实战基础 - 设置点击事件、Activity跳转、传值
    基础过度Kotlin基础入门-变量、方法、对象、继承、接口Kotlin实战基础-设置点击事件、Activity跳转、传值Kotlin实战基础-Activity、Fragment传递参数尚未完整,遇缺再补-点击事件Activity跳转Activity跳转+Intent传值点击事件点击事件是基础功......
  • git和github的入门操作
    之前因为工作中用的都是SVN版本控制工具,没接触过git和github,现在开始深入自学Django框架技术后,看到官网推荐使用git,然后这两天网上查阅了很多文章教程,学到入门操作需要学习的点,太多的知识点要后面慢慢深入学习了。看到一个网上教程说的一段话:“如果你是一枚Coder,但是你不......
  • 只监听父元素的滚动事件,而不监听子元素的滚动事件
    第一种,JS1、判断domthis.$refs.squareRef.addEventListener('wheel',this.addScrolbarFn,false)addScrolbarFn(event){event.stopPropagation()constdom=this.$refs?.rightResultRef?.$refs?.resultDivif(event.target===this.$refs?.squareRef){......
  • Kotlin基础入门 - for、forEach 循环
    Kotlin基础入门-for、forEach循环liuyong.blog.csdn.net成就一亿技术人!不论身处何方for循环这种操作都随处可见,鉴于大多数Android开发都是从Java转到Kt的,所以我的思路是从Java的使用习惯来讲一些Kt的for、forEach循环方式基础for循环惯性for循环进阶for循......
  • 第1章 jQuery入门
    学习要点:1.什么是jQuery2.学习jQuery的条件3.jQuery的版本4.jQuery的功能和优势5.其他JavaScript库6.是否兼容低版本IE7.下载及运行jQuery一.什么是jQueryjQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一整套定义好的方法。它的作者是JohnResig,于2006年创建的一个开......
  • SpringSecurity从入门到精通:其他权限校验方法&自定义权限校验方法
    其他权限校验方法我们前面都是使用@PreAuthorize注解,然后在在其中使用的是hasAuthority方法进行校验。SpringSecurity还为我们提供了其它方法例如:hasAnyAuthority,hasRole,hasAnyRole等。​这里我们先不急着去介绍这些方法,我们先去理解hasAuthority的原理,然后再去学......
  • SpringSecurity从入门到精通:从数据库查询权限信息&自定义失败处理
    从数据库查询权限信息      记得打开redis      自定义失败处理我们还希望在认证失败或者是授权失败的情况下也能和我们的接口一样返回相同结构的json,这样可以让前端能对响应进行统一的处理。要实现这个功能我们需要知道SpringSecurity......