JS三大事件

鼠标事件

click：单击
dblclick：双击
mousedown：鼠标按下
mouseup：鼠标抬起
mouseover：鼠标悬浮
mouseout：鼠标离开
mousemove：鼠标移动
mouseenter：鼠标进入
mouseleave：鼠标离开
<button onclick="myClick()">鼠标单击</button>
<button ondblclick="myDBClick()">鼠标双击</button>
<button onmousedown="myMouseDown()" onmouseup="myMouseUp()">鼠标按下和抬起</button>
<button onmouseover="myMouseOver()" onmouseout="myMouseOut()">鼠标悬浮和离开</button>
<button onmousemove="myMouseMove()">鼠标移动</button>
<button onmouseenter="myMouseEnter()" onmouseleave="myMouseLeave()">鼠标进入和离开</button><script>function myClick() {console.log("你单击了按钮！");}function myDBClick() {console.log("你双击了按钮！");}function myMouseDown() {console.log("鼠标按下了！");}function myMouseUp() {console.log("鼠标抬起了！");}function myMouseOver() {console.log("鼠标悬浮！");}function myMouseOut() {console.log("鼠标离开！")}function myMouseMove() {console.log("鼠标移动！")}function myMouseEnter() {console.log("鼠标进入！")}function myMouseLeave() {console.log("鼠标离开！")}</script>

键盘事件

keydown：按键按下
keyup：按键抬起
keypress：按键按下抬起<body><input id="name" type="text" onkeydown="myKeyDown(this.id)" onkeyup="myKeyUp(this.id)"></body><script>/*输出输入的字符*/function myKeyDown(id) {console.log(document.getElementById(id).value);}/*按键结束，字体转换为大写*/function myKeyUp(id) {var text = document.getElementById(id).value;document.getElementById(id).value = text.toUpperCase();}</script>

HTML事件

load：文档加载完成
select：被选中的时候
change：内容被改变
focus：得到光标
resize：窗口尺寸变化
scroll：滚动条移动<body onload="loaded()"><div style="height: 3000px" ></div><input type="text" id="name" onselect="mySelect(this.id)"><input type="text" id="name2" onchange="myChange(this.id)"><input type="text" id="name3" onfocus="myFocus()"></body><script>window.onload = function () {console.log("文档加载完毕！");};/*window.onunload = function () {alert("文档被关闭！");};*//*打印选中的文本*/function mySelect(id) {var text = document.getElementById(id).value;console.log(text);}/*内容被改变时*/function myChange(id) {var text = document.getElementById(id).value;console.log(text);}/*得到光标*/function myFocus() {console.log("得到光标！");}/*窗口尺寸变化*/window.onresize = function () {console.log("窗口变化！")};/*滚动条移动*/window.onscroll = function () {console.log("滚动");}</script>

事件模型：

    <body><!--脚本模型：行内绑定--><button onclick="alert('hello')">hello</button><!--内联模型--><button onclick="showHello()">hello2</button><!--动态绑定--><button id="btn">hello3</button></body><script>function showHello() {alert("hello");}/*DOM0：同一个元素只能添加一个同类事件* 如果添加多个，后面的会把前面的覆盖掉*/var btn = document.getElementById("btn");btn.onclick = function () {alert("hello");};btn.onclick = function () {alert("hello world");};/*DOM2:可以给一个元素添加多个同类事件*/btn.addEventListener("click", function () {alert("hello1");});btn.addEventListener("click", function () {alert("hello2");});/*不同浏览器的兼容写法*//*IE*/if (btn.attachEvent) {btn.attachEvent("onclick", function () {alert("hello3");});/*W3C*/} else {btn.addEventListener("click", function () {alert("hello4");})}</script>

事件冒泡与事件捕获：

     <style>#div1{width: 400px;height: 400px;background-color: #0dfaff;}#div2{width: 300px;height: 300px;background-color: #33ff66;}#div3{width: 200px;height: 200px;background-color: #fff24a;}#div4{width: 100px;height: 100px;background-color: #ff4968;}</style><title>事件冒泡、事件捕获</title></head><body><div id="div1"><div id="div2"><div id="div3"><div id="div4"></div></div></div></div></body><script>var div1 = document.getElementById("div1");div1.addEventListener("click",function (event) {/*阻止事件冒泡*/event.stopPropagation();alert("div1");},false);var div2 = document.getElementById("div2");div2.addEventListener("click",function (event) {/*阻止事件冒泡*/event.stopPropagation();alert("div2");},false);var div3 = document.getElementById("div3");div3.addEventListener("click",function (event) {/*阻止事件冒泡*/event.stopPropagation();alert("div3");},false);var div4 = document.getElementById("div4");div4.addEventListener("click",function (event) {/*阻止事件冒泡*/event.stopPropagation();alert("div4");},false);</script>

阻止默认事件：

    <body><a href="http://www.baidu.com" onclick="stop(event)">百度</a></body><script>function stop(event) {if (event.preventDefault()) {event.preventDefault();} else {event.returnValue = false;}alert("不跳转！")}</script>

JavaScript三大事件（二十二）相关推荐

JavaScript学习（八十二）—JavaScript的组成
JavaScript学习(八十二)-JavaScript的组成一.ECMAScript ECMAScript是由ECMA国际(原欧洲计算机制造商协会)进行标准化的一门编程语言,这种语言在万维网上应用 ...
JavaScript学习（七十二）—严格模式
JavaScript学习(七十二)-严格模式 JavaScript除了提供正常模式外,还提供了严格模式,ES5的严格模式是采用具有限制性JavaScript变体的一种方式,即在严格条件下运行JS代码, ...
JavaScript学习（六十二）—解析选项和序列化选项
JavaScript学习(六十二)-解析选项和序列化选项一.解析选项格式:JSON.parse(参数1,参数2); 参数说明参数1:表示要转换为JS对象的json字符串参数2:表示将json转 ...
JavaScript学习（五十二）—继承、call方法和apply方法
JavaScript学习(五十二)-继承.call方法和apply方法学习内容一.继承二.call方法三.apply方法一.继承所谓继承就是两个构造方法建立起来的某种联系,通过某种联系,可 ...
JavaScript学习（四十二）—利用工厂模式创建对象以及工厂模式创建对象的不足
JavaScript学习(四十二)-利用工厂模式创建对象以及工厂模式创建对象的不足一.利用工厂模式创建对象工厂模式是JavaScript中的一种设计模式,它的作用是批量创建具有同种属性的对象. 格 ...
JavaScript学习（三十二）— Keycode常用键位码对照表
JavaScript学习(三十二)- Keycode常用键位码对照表 (一).字母和数字键的键码值(keyCode) (二).控制键键码值(keyCode) (三).多媒体键码值(keyCode)
JavaScript学习（二十二）—动态创建表格
JavaScript学习(二十二)-动态创建表格效果如下: 代码如下: <!DOCTYPE html> <html lang="en"><head& ...
2021年大数据Hadoop（二十二）：MapReduce的自定义分组
全网最详细的Hadoop文章系列,强烈建议收藏加关注! 后面更新文章都会列出历史文章目录,帮助大家回顾知识重点. 目录本系列历史文章前言 MapReduce的自定义分组需求分析实现第一步: ...
Android开发笔记（一百二十二）循环器视图RecyclerView
RecyclerView RecyclerView是Android在support-v7库中新推出控件,中文别名为循环器视图,它的功能非常强大,可分别实现ListView.GridView,以及瀑布流 ...
JAVA基础知识总结：一到二十二全部总结
>一: 一.软件开发的常识 1.什么是软件? 一系列按照特定顺序组织起来的计算机数据或者指令常见的软件: 系统软件:Windows\Mac OS \Linux 应用软件:QQ,一系列的播放器( ...

JavaScript三大事件（二十二）

JS三大事件

鼠标事件

键盘事件

HTML事件

事件模型：

事件冒泡与事件捕获：

阻止默认事件：

JavaScript三大事件（二十二）相关推荐

最新文章

热门文章