JS DOM事件（常用消息、常用事件、addEventListener、removeEventListener）

HTML 事件的例子：

当用户点击鼠标时
当网页已加载时
当图像已加载时
当鼠标移动到元素上时
当输入字段被改变时
当提交 HTML 表单时
当用户触发按键时

addEventListener()方法（与事件结合使用，触发）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>阿西吧</title>
</head>
<body><p>实例使用 addEventListener() 方法在同一个按钮中添加多个事件。</p>
<button id="myBtn">点我</button>
<p id="demo"></p>
<script>
var x = document.getElementById("myBtn");
x.addEventListener("mouseover", myFunction);
x.addEventListener("click", mySecondFunction);
x.addEventListener("mouseout", myThirdFunction);
function myFunction() {document.getElementById("demo").innerHTML += "Moused over!<br>"
}
function mySecondFunction() {document.getElementById("demo").innerHTML += "Clicked!<br>"
}
function myThirdFunction() {document.getElementById("demo").innerHTML += "Moused out!<br>"
}
</script></body>
</html>

addEventListener()所有浏览器兼容的解决方法

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>阿西吧)</title>
</head>
<body><p> Internet Explorer 8 及更早IE版本不支持 addEventListener() 方法。</p>
<p>该实例演示了所有浏览器兼容的解决方法。</p>
<button id="myBtn">点我</button>
<script>
var x = document.getElementById("myBtn");
if (x.addEventListener) {x.addEventListener("click", myFunction);
} else if (x.attachEvent) {x.attachEvent("onclick", myFunction);
}
function myFunction() {alert("Hello World!");
}
</script></body>
</html>

removeEventListener() 方法（移除由 addEventListener() 方法添加的事件）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>阿西吧</title>
</head>
<head>
<style>
#myDIV {background-color: coral;border: 1px solid;padding: 50px;color: white;
}
</style>
</head>
<body><div id="myDIV"> div 元素添加了 onmousemove 事件句柄，鼠标在桔红色的框内移动时会显示随机数。<p>点击按钮移除 DIV 的事件句柄。</p><button onclick="removeHandler()" id="myBtn">点我</button>
</div>
<p id="demo"></p>
<script>
document.getElementById("myDIV").addEventListener("mousemove", myFunction);
function myFunction() {document.getElementById("demo").innerHTML = Math.random();
}
function removeHandler() {document.getElementById("myDIV").removeEventListener("mousemove", myFunction);
}
</script></body>
</html>

单击事件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>阿西吧</title>
</head>
<body><h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1></body>
</html>

函数处理

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<head>
<script>
function changetext(id){id.innerHTML="Ooops!";
}
</script>
</head>
<body><h1 onclick="changetext(this)">点击文本!</h1></body>
</html>

单击按钮

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>阿西吧</title>
</head>
<body><p>点击按钮执行 <em>displayDate()</em> 函数.</p>
<button onclick="displayDate()">点这里</button>
<script>
function displayDate(){document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p></body>
</html>

单击按钮DOM分配事件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>阿西吧</title>
</head>
<head>
</head>
<body><p>点击按钮执行 <em>displayDate()</em> 函数.</p>
<button id="myBtn">点这里</button>
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
function displayDate(){document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p></body>
</html>

onload事件（用户进入页面时触发）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>阿西吧</title>
</head>
<body onload="checkCookies()"><script>
function checkCookies(){if (navigator.cookieEnabled==true){alert("Cookies 可用")}else{alert("Cookies 不可用")}
}
</script>
<p>弹窗-提示浏览器 cookie 是否可用。</p></body>
</html>

onunload事件（用户离开页面时触发）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>阿西吧</title>
</head>
<body onunload="checkCookies()"><script>
function checkCookies(){alert("88888")
}
</script></body>
</html>

onchange事件（用户输入内容后离开时触发）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>阿西吧</title>
</head>
<head>
<script>
function myFunction(){var x=document.getElementById("fname");x.value=x.value.toUpperCase();
}
</script>
</head>
<body>输入你的名字: <input type="text" id="fname" onchange="myFunction()">
<p>当你离开输入框后，函数将被触发，将小写字母转为大写字母。</p></body>
</html>

onmouseover事件（用户鼠标移至元素上）

onmouseout事件（用户鼠标移出元素时）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>阿西吧</title>
</head>
<body><div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div>
<script>
function mOver(obj){obj.innerHTML="Thank You"
}
function mOut(obj){obj.innerHTML="Mouse Over Me"
}
</script></body>
</html>

onmousedown事件（当点击鼠标按钮时）

onmouseup事件（释放鼠标按钮时）

onclick 事件（完成鼠标点击时）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>阿西吧</title>
</head>
<body><div onmousedown="mDown(this)" onmouseup="mUp(this)" onclick="mClick(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div>
<script>
function mDown(obj){obj.innerHTML="111111"
}
function mUp(obj){obj.innerHTML="222222"
}
function mClick(obj){alert("check")
}
</script></body>
</html>

（onmousedown和onmouseup事件）鼠标点击按钮更换图像

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>阿西吧</title>
</head>
<head>
<script>
function lighton(){document.getElementById('myimage').src="bulbon.gif";
}
function lightoff(){document.getElementById('myimage').src="bulboff.gif";
}
</script>
</head><body>
<img id="myimage" onmousedown="lighton()" onmouseup="lightoff()" src="bulboff.gif" width="100" height="180" />
<p>点击不释放鼠标灯将一直亮着!</p>
</body>
</html>

（onfocus事件）当输入字段获得焦点时，改变其背景色

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>阿西吧</title>
</head>
<head>
<script>
function myFunction(x){x.style.background="yellow";
}
</script>
</head>
<body>输入你的名字: <input type="text" onfocus="myFunction(this)">
<p>当输入框获取焦点时，修改背景色（background-color属性） 将被触发。</p></body>
</html>

（鼠标事件）当指针移动到元素上方时，改变其颜色；当指针移出文本后，会再次改变其颜色

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>阿西吧</title>
</head>
<body><h1 onmouseover="style.color='red'"onmouseout="style.color='black'">将鼠标移至文部上</h1></body>
</html>

JS DOM事件（常用消息、常用事件、addEventListener、removeEventListener）相关推荐

js动态添加html元素绑定事件,JS实现动态添加DOM节点和事件的方法示例
本文实例讲述了JS实现动态添加DOM节点和事件的方法.分享给大家供大家参考,具体如下: 运行效果图如下: 完整实例代码如下: /p> "http://www.w3.org/TR/xht ...
js常用阻止冒泡事件
原文链接:http://caibaojian.com/javascript-stoppropagation-preventdefault.html 防止冒泡 w3c的方法是e.stopPropagat ...
3.3.1JavaScript网页编程——WebAPI（JS之DOM基础篇，含事件）
目录 DOM和BOM DOM 根据CSS选择器来获取DOM元素 (重点) 选择引号里面加**css选择器** 获取页面标签querySelect和querySelectAll 其他获取DOM元素方法( ...
773-780---DOM事件高级（常用鼠标事件，案例：跟随鼠标的天使，常用的键盘事件，案例：模拟京东按键输入内容，案例：模拟京东快递单号查询）
文章目录事件高级 7 常用的鼠标事件 7.1常用的鼠标事件 7.2 鼠标事件对象案例:跟随鼠标的天使 8 常用的键盘事件 8.1 常用的键盘事件 8.2 键盘事件对象 8.3 ASCII 表案例 ...
操作键盘事件源码解析（常用的鼠标事件、键盘事件对象之keyCode属性）
操作键盘事件常用的鼠标事件 <!DOCTYPE html> <html lang="en"><head><meta charset=&q ...
js：按钮绑定多个事件的三种方法（js，DOM，jQuery）
1.js可以直接通过通过button的onclick添加多个函数来绑定多个事件. 2.DOM可以通过事件监听函数addEventListener绑定事件. 3.Jquery可以通过click方法来绑定 ...
常用的鼠标事件和键盘事件
常用鼠标事件一.禁止选中文字和禁止右键菜单 1.禁止鼠标右键菜单 contextmenu主要控制应该何时显示上下文菜单,主要用于程序员取消默认的上下文菜单 2.禁止鼠标选中( selectstart ...
Javascript常用API及事件原理相关笔记（一）
1.定义Date日期对象的四种方式及对日期对象进行操作 <!DOCTYPE html> <html lang="en"> <head><m ...
web前端学习day_03:JavaScript:如何使用/ 语法/ 方法/ NaN/ js对象分类/ BOM浏览器相关/ 事件/ DOM文档对象模型
JavaScript 给页面添加动态效果 JavaScript是一门编程语言,和Java没有关系,为了蹭热度. 语言特点: 属于脚本语言,不需要编译直接解析执行. 基于面向对象属于弱类型语言, 强类 ...
按钮button的常用属性和事件
文章目录 1 按钮button的常用属性和事件 1 按钮button的常用属性 1 按钮button的常用属性和事件 1 按钮button的常用属性 Tag: 我们可以通过tag对按钮增加数据. pr ...

JS DOM事件（常用消息、常用事件、addEventListener、removeEventListener）

addEventListener()方法（与事件结合使用，触发）

removeEventListener() 方法（移除由 addEventListener() 方法添加的事件）

单击事件

单击按钮

单击按钮DOM分配事件

onload事件（用户进入页面时触发）

onunload事件（用户离开页面时触发）

onchange事件（用户输入内容后离开时触发）

onmouseover事件（用户鼠标移至元素上）

onmouseout事件（用户鼠标移出元素时）

onmousedown事件（当点击鼠标按钮时）

onmouseup事件（释放鼠标按钮时）

onclick 事件（完成鼠标点击时）

JS DOM事件（常用消息、常用事件、addEventListener、removeEventListener）相关推荐

最新文章

热门文章