21- JavaScript 事件简介
事件简介
事件:就是文档或浏览器窗口中发生的一些特定的交互瞬间。对于 Web 应用来说,有下面这些代表性的事件:点击某个元素、将鼠标移动至某个元素上方、关闭弹窗等等。
JavaScript 是以事件驱动为核心的一门语言。JavaScript 与 HTML 之间的交互是通过事件实现的。
事件的三要素
事件的三要素:事件源、事件、事件驱动程序。
比如,我用手去按开关,灯亮了。这件事情里,事件源是:手。事件是:按开关。事件驱动程序是:灯开了或者关了。
再比如,网页上弹出一个广告,我点击右上角的X
,广告就关闭了。这件事情里,事件源是:X
。事件是:onclick。事件驱动程序是:广告关闭了。
于是我们可以总结出:谁引发的后续事件,谁就是事件源。
总结如下:
事件源:引发后续事件的html标签。
事件:js已经定义好了(见下图)。
事件驱动程序:对样式和html的操作。也就是DOM。
也就是说,我们可以在时间对应的属性中写一些js代码,当事件被触发时,这些代码将会执行。
代码书写步骤如下:(重要)
(1)获取事件源:document.getElementById(“box”); // 类似于Android里面的findViewById
(2)绑定事件: 事件源box.事件onclick = function(){ 事件驱动程序 };
(3)书写事件驱动程序:关于DOM的操作。
最简单的代码举例:(点击box1,然后弹框)
<body>
<div id="box1"></div>
<script type="text/javascript">// 1、获取事件源var div = document.getElementById("box1");// 2、绑定事件div.onclick = function () {// 3、书写事件驱动程序alert("我是弹出的内容");}
</script>
</body>
常见的事件如下:
下面针对这事件的三要素,进行分别介绍。
1、获取事件源的方式(DOM节点的获取)
获取事件源的常见方式如下:
var div1 = document.getElementById("box1"); //方式一:通过id获取单个标签
var arr1 = document.getElementsByTagName("div"); //方式二:通过 标签名 获得 标签数组,所以有s
var arr2 = document.getElementsByClassName("hehe"); //方式三:通过 类名 获得 标签数组,所以有s
2、绑定事件的方式
方式一:直接绑定匿名函数
<div id="box1" ></div>
<script type="text/javascript">var div1 = document.getElementById("box1");//绑定事件的第一种方式div1.onclick = function () {alert("我是弹出的内容");}
</script>
方式二:先单独定义函数,再绑定
<div id="box1" ></div>
<script type="text/javascript">var div1 = document.getElementById("box1");//绑定事件的第二种方式div1.onclick = fn; //注意,这里是fn,不是fn()。fn()指的是返回值。//单独定义函数function fn() {alert("我是弹出的内容");}
</script>
注意上方代码的注释。绑定的时候,是写fn,不是写fn()。fn代表的是整个函数,而fn()代表的是返回值。
方式三:行内绑定
<!--行内绑定-->
<div id="box1" onclick="fn()"></div>
<script type="text/javascript">function fn() {alert("我是弹出的内容");}
</script>
注意第一行代码,绑定时,是写的"fn()"
,不是写的"fn"
。因为绑定的这段代码不是写在js代码里的,而是被识别成了字符串。
3、事件驱动程序
我们在上面是拿alert举例,不仅如此,我们还可以操作标签的属性和样式。举例如下:
点击鼠标时,原本粉色的div变大了,背景变红:
<style>#box1 {width: 100px;height: 100px;background-color: pink;cursor: pointer;}</style>
</head><body><div id="box1" ></div><script type="text/javascript">var div1 = document.getElementById("box1");//点击鼠标时,原本粉色的div变大了,背景变红了div1.onclick = function () {div1.style.width = "200px"; //属性值要写引号div1.style.height = "200px";div1.style.backgroundColor = "red"; //属性名是backgroundColor,不是background-color}
</script>
上方代码的注意事项:
在js里写属性值时,要用引号
在js里写属性名时,是
backgroundColor
,不是CSS里面的background-color
。
实现效果如下:
onload事件
onload事件比较特殊,这里单独讲一下。
当页面加载(文本和图片)完毕的时候,触发onload事件。
举例:
<script type="text/javascript">window.onload = function () {console.log("smyhvae"); //等页面加载完毕时,打印字符串}
</script>
有一点我们要知道:js的加载是和html同步加载的。因此,如果使用元素在定义元素之前,容易报错。这个时候,onload事件就能派上用场了,我们可以把使用元素的代码放在onload里,就能保证这段代码是最后执行。
建议是:整个页面上所有元素加载完毕再执行js内容。所以,window.onload可以预防使用标签在定义标签之前。
备注:关于 onLoad事件,在下一篇文章《24-DOM简介和DOM操作》中有更详细的讲解和示例。
事件举例:京东顶部广告栏
比如上面这张图,当鼠标点击右上角的X
时,关掉整个广告栏,这就要用到事件。
代码实现如下:
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>* {padding: 0;margin: 0;}.top-banner {background-color: pink;height: 80px;}.w {width: 1210px;margin: 10px auto;position: relative;}img {display: block;width: 1210px;height: 80px;background-color: blue;}a {position: absolute;top: 5px;right: 5px;color: #fff;background-color: #000;text-decoration: none;width: 20px;height: 20px;font: 700 14px/20px "simsum";text-align: center;}.hide {display: none!important;}</style>
</head>
<body><div class="top-banner" id="topBanner"><div class="w"><img src="" alt=""/><a href="#" id="closeBanner">×</a></div></div>
<script>//需求:点击案例,隐藏盒子。//思路:点击a链接,让top-banner这个盒子隐藏起来(加隐藏类名)。//1.获取事件源和相关元素var closeBanner = document.getElementById("closeBanner");var topBanner = document.getElementById("topBanner");//2.绑定事件closeBanner.onclick = function () {//3.书写事件驱动程序//类控制
// topBanner.className += " hide"; //保留原类名,添加新类名topBanner.className = "hide";//替换旧类名(方式一)
// topBanner.style.display = "none"; //方式二:与上一行代码的效果相同}</script>
</body>
</html>
注意最后一行代码,这种方式会替换旧类名,意思是,不管之前的类名叫什么,都会被修改。
事件举例:
要求实现效果:当鼠标悬停在img上时,更换为另外一张图片;鼠标离开时,还原为本来的图片。
代码实现:
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><script>//window.onload页面加载完毕以后再执行此代码window.onload = function () {//需求:鼠标放到img上,更换为另一张图片,也就是修改路径(src的值)。//步骤://1.获取事件源//2.绑定事件//3.书写事件驱动程序//1.获取事件源var img = document.getElementById("box");//2.绑定事件(悬停事件:鼠标进入到事件源中,立即触发事件)img.onmouseover = function () {//3.书写事件驱动程序(修改src)img.src = "image/jd2.png";
// this.src = "image/jd2.png";}//2.绑定事件(悬停事件:鼠标进入到事件源中,立即触发事件)img.onmouseout = function () {//3.书写事件驱动程序(修改src)img.src = "image/jd1.png";}}</script>
</head>
<body>
<img id="box" src="data:image/jd1.png" style="cursor: pointer;border: 1px solid #ccc;"/>
</html>
21- JavaScript 事件简介相关推荐
- JavaScript总结【11】事件简介
目录 JavaScript 事件简介 常用浏览器事件 Event addEventListener removeEventListener event对象 冒泡和捕获 冒泡 DOM事件传播的3个阶段. ...
- JavaScript事件冒泡简介及应用
JavaScript事件冒泡简介及应用 一.什么是事件冒泡 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件 ...
- 【探讨】javascript事件机制底层实现原理
前言 又到了扯淡时间了,我最近在思考javascript事件机制底层的实现,但是暂时没有勇气去看chrome源码,所以今天我来猜测一把 我们今天来猜一猜,探讨探讨,javascript底层事件机制是如 ...
- Javascript事件模型系列(一)事件及事件的三种模型
一.开篇 在学习javascript之初,就在网上看过不少介绍javascript事件的文章,毕竟是js基础中的基础,文章零零散散有不少,但遗憾的是没有看到比较全面的系列文章.犹记得去年这个时候,参加 ...
- JavaScript 事件相关
一.如何理解JavaScript事件? 个人理解是浏览器或鼠标或键盘触发某个行为而产生的交互.它可能是某种鼠标行为(点击.按下.划过....),也可能是某种键盘操作,亦或是浏览器发生的行为(文档加载完 ...
- JavaScript 事件模型 事件处理机制
这篇文章对于了解Javascript的事件处理机制非常好,将它全文转载于此,以备不时之需. 什么是事件? 事件(Event)是JavaScript应用跳动的心脏 ,也是把所有东西粘在一起的胶水.当我们 ...
- JavaScript事件冒泡应用实例
在一些传统的小型WEB应用开发过程中,JavaScript通常只是拿来做表单验证而以,所以你很少会遇到因为JavaScript事件冒泡而影响功能的实现情况,又或者事件冒泡对最终实现效果影响不大,可忽略 ...
- JavaScript事件 DOMNodeInserted DOMNodeRemoved
JavaScript事件 DOMNodeInserted DOMNodeRemoved JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定交互的瞬间. ...
- Javascript事件汇总
Javascript事件汇总 事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture ...
- 【移动端兼容问题研究】javascript事件机制详解(涉及移动兼容) – 叶小钗
这篇博客有点长,如果你是高手请您读一读,能对其中的一些误点提出来,以免我误人子弟,并且帮助我提高 如果你是javascript菜鸟,建议您好好读一读,真的理解下来会有不一样的收获 在下才疏学浅,文中难 ...
最新文章
- GAN还有这种操作!谷歌大脑和X实验室利用模拟条件和域适应提高机器抓取效率(附论文)
- 开启Nginx的目录文件列表功能
- python导出csv不带引号的句子_python csv writer在不需要时添加引号
- 用stm32开发时是直接买现成的开发板还是芯片?开发板学习,芯片硬件设计
- intel fpga 开发工具Quartus Prime 软件的安装,使用详细教程
- SEO内容为王之如何创造伪原创
- Linux乱码和数据库乱码的问题简单排查
- “野火FreeRTOS教程”第7章补充知识点-异常流程
- A2 雷达多点触控
- MySQL的COUNT语句--count(*)、 count(常量)、 count(列名)
- Windows11安装Android子系统——安装篇
- Gos ——内存管理系统
- Python免费发短信
- Python课程入门之Pycharm创建PY文件的使用步骤与模板创建
- 芯片市场混乱,教你几招辨别真假
- 计算机卡登录界面,win10电脑卡在登录界面怎么办
- Ubuntu 设置静态IP
- easyexcel Create workbook failure 问题解决
- Java集合深入解析(一)——集合的基本概念
- 大前端 - react - 服务端渲染 - Next.js