转:https://blog.csdn.net/qwer_df_b/article/details/77509859
鼠标事件
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("鼠标离开!")
- }
键盘事件
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>