500字范文 > js事件监听鼠标事件键盘浏览器表单

js事件监听鼠标事件键盘浏览器表单

时间：2018-11-01 08:14:19

相关推荐

js事件监听鼠标事件键盘浏览器表单

这里写目录标题

js事件鼠标事件键盘事件浏览器事件表单事件事件绑定方式监听事件解绑为事件绑定做兼容获取下拉框的值练习

js事件

1.什么是事件

一件事情发生了，对其进行处理或者响应。

2. 事件的三要素

事件源，事件类型，事件处理

比如：点击右上角的X，页面关闭。事件源：X，事件类型：点击事件处理：页面关闭。

谁引发的后续事件，谁就是事件源。

事件源：DOM节点（一般为元素节点）

事件类型

事件处理函数（代码块）

事件类型：

1.鼠标事件

2.键盘事件

3.浏览器事件

4.表单事件

鼠标事件

click == 鼠标左键单击dbclick == 鼠标左键双击contextmenu == 鼠标右键单击mousewheel == scroll鼠标滚动mousedown == 鼠标单击事件不管是左键还是右键，还是滚动都可以触发mouseup == 鼠标抬起mousemove == 鼠标移动mouseover == 鼠标移入（会进行事件传播）mouseout == 鼠标移出

mouseenter == 鼠标移入（不会进行事件传播）

mouseleave == 鼠标移出

鼠标滚动事件

onmousewheel事件

该事件发生在鼠标滚轮滚动时，火狐中，使用DOMMouseScroll跟其细节事件代替。注意：onmousewheel和DOMMouseScroll事件，在没有滚动条或者内容没有被滚动的时候也会发生，意思是只要鼠标动不管页面动不动。如果你是想一个元素内容滚动后接受一个通知的话，使用onscroll事件。

onscroll事件

事件发生在元素内容滚动的时候，也包括键盘上下键，载入也可触发。事件仅仅在有滚动条时发生，使用overflow属性为元素创建一个滚动条。

使用window.scroll必须要有滚动条才能触发，一般配合$(window).scrollTop()使用.

获取滚动值

获取滚动值原生js的获取页面滚动值的兼容性处理document.documentElement.scrollTop 标准模式document.body.scrollTop 没有DOCTYPE 声明的时候处理window.pageYOffset safari浏览器

用户改变域的内容

onchange

<body>//效果当下拉框的内容发生改变使触发该事件城市:<select id="city"><option>请选择城市</option><option>上海</option><option>北京</option></select><script>var city = document.querySelector("#city");city.onchange = function() {console.log("内容改变了..")}</script></body>

键盘事件

不是所有的元素都能触发

表单元素(选中效果)，document ,window

keydown

键盘按下

keyup

键盘抬起

keypress

键盘按下

在文本框中输入的内容必须与你按下的键是一致的

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#box{width: 300px;height: 300px;background-color: brown;}</style><script>window.onload = function(){var box = document.getElementById("box");box.onkeydown = function(){console.log("键盘按下");}//这个元素不能触发document.onkeydown = function(){console.log("键盘按下");}// window.onkeydown = function(){//console.log("键盘按下");// }// var inp = document.querySelector("input");// inp.onkeypress = function(){//console.log("键盘按下");// }// inp.onkeyup = function(){//console.log("键盘抬起");// }}</script></head><body><div id="box"></div><input type="text"></body></html>

浏览器事件

<style>body{height: 2000px;}</style></head><script>var i = 0;window.onscroll = function(){console.log(i++);//有滚动轴情况下，只要滚就会触发}window.onresize = function(){console.log("页面尺寸改变");//当将浏览器窗口变小的时候}// window.onoffline = function(){//console.log("你家网断了");// }// window.ononline = function(){//console.log("你家网恢复了");// }</script><body> </body>

表单事件

表单事件主要是表单元素和form标签的

change 表单内容发生改变时，而且已经失去焦点时触发。

input 表单输入事件

focus 获取焦点

blur 失去焦点

submit 表单提交

reset 表单重置

表单元素的另外三种获取方法(不用记,知道就好,不用)

</head>不用记这三种不用<body><form name="form1" action="/">表单<input type="text"></form></body><script>// var form1 = document.form1;//var form1 = document.forms["form1"];//var form1 = document.forms[0];console.log(form1);</script>

获取表单内容并提交的三种方式(优先用第一种)

<body>第一种方式/使用的是普通按钮的提交获取表单.submit();这个方法提交<form action="/" id="biao">姓名:<input id="nei" type="text"><input type="button" value="提交表单1" οnclick="tijiao()"></input></form><hr>第二种方式使用的是submit加οnclick="return 函数()"函数运行为真时提交,为假时不提交<form action="/">姓名:<input id="nei2" type="text"><input type="submit" value="提交表单2" οnclick="return tijiao()"></input></form><hr>第三种方式和第二种差不多,提交功能函数书写位置不同,原理一样<form action="/" οnsubmit="return tijiao()">姓名:<input id="nei3" type="text"><input type="submit" value="提交表单3"></input></form></body><script>function tijiao() {var nei = document.getElementById("nei").value; //获取表单内容if (nei == null || nei.trim() == '') {return; //判断表单内容为空时不提交}var biao = document.getElementById("biao"); //获取到表单元素节点biao.submit(); //提交表单,这一步才是提交了表单}//-----二和三方法车不多,只是赋予提交功能函数的书写位置不同-------利用的是return false不提交true提交这个特性-------------------------------------------------function tijiao() {var nei = document.getElementById("nei2").value;if (nei == null || nei.trim() == '') {return false;} else {return true;}}//------------------------------------------------------function tijiao() {var nei = document.getElementById("nei3").value;if (nei == null || nei.trim() == '') {return false;} else {return true;}}</script>

事件绑定方式

1.行内式

在标签中直接通过on+事件类型属性去绑定事件

<div id="box" onclick="show()"></div>

2.内联式

（1）直接绑定匿名函数

（2）先定义函数，再去绑定

var box = document.getElementById("box");box.onclick = function(){alert("直接绑定匿名函数");}

监听

addEventListener

语法：事件源.addEventListener(“事件类型”,事件处理函数);

<script>window.onload = function() {var btn = document.querySelector("button");console.log(btn);btn.addEventListener('click', function() {alert("监听弹出..")})}</script>/*<script>也可以这样写window.onload = function() {var btn = document.querySelector("button");console.log(btn);btn.addEventListener('click', dian)function dian() {alert("监听弹出..")}}</script>*/</head><body><button>点击我</button></body>

addEventListener 第三个参数为true的话表示捕获。 false 表示冒泡。

1、事件冒泡

事件冒泡：事件会从最内层的元素开始发生，一直向上传播，直到document对象。

2、事件捕获

事件捕获：与事件冒泡相反，事件会从最外层开始发生，直到最具体的元素。

使用监听，可以给同一个事件类型绑定多个事件处理函数。

多个事件处理函数执行顺序是按照绑定顺序来的

先绑定先执行

<script>window.onload = function() {var btn = document.querySelector("button");console.log(btn);btn.addEventListener('click', ji);//先绑定,所以弹出2 输出时在 1的前面btn.addEventListener('click', dian);function dian() {console.log("监听弹出1..");}function ji() {console.log("监听弹出2..")}}</script></head><body><button>点击我</button></body>

在IE低版本不支持

attachEvent()

IE低版本支持

语法：事件源.attachEvent(“on+事件类型”,事件处理函数);

多个事件处理函数的执行顺序是按照绑定顺序的倒序来的

先绑定后执行

事件解绑

对于非监听方式，可以直接将null赋值。(也叫事件解绑)

box.onclick = function(){alert("您已成功充值1000万！");box.onclick = null;//弹一次就会停止}box.onclick = null;//放外面一次都不会弹

对于监听方式绑定解绑方法

标准浏览器

removeEventListener(“事件类型”,事件处理函数)；

【注意】如果你想要解绑事件，那么你在绑定事件时，一定要将函数单独定义。使用函数名的方式去绑定事件。(匿名函数是没办法解绑的)

IE低版本

detachEvent(“on+事件类型”,事件处理函数);

<script>window.onload = function(){var box=document.querySelector("#box");function show() {alert("您已成功充值1000万！");}box.addEventListener("click",show);事件监听方式绑定box.removeEventListener("click",show); 解绑，一次都不执行 }</script></head><body><div id="box"></div></body>

为事件绑定做兼容

window.onload = function(){/**ele 事件源type 事件类型handler 事件处理函数*/function on(ele,type,handler) {// 标准浏览器if (ele.addEventListener) {ele.addEventListener(type,handler);//下面调用时加引号了,所以这里没加}else{// IE浏览器ele.attachEvent("on"+type,handler);}}function show(){alert("您已成功充值1000万！");}var box = document.getElementById("box");on(box,"click",show);//调用传参}</script></head><body><div id="box"> </div></body>

获取下拉框的值练习

<body>城市:<select id="unform"><option value="-1">请选择</option><option value="beijing">北京</option><option value="-1">上海</option><option>深圳</option></select><button id="sub">获取城市名</button></body><script>var unform = document.getElementById("unform"); //1~下拉框var sub = document.getElementById("sub"); //获取按钮sub.onclick = function() {//2~获取下拉框的所有下拉选项必须是这个单词optionsvar selections = unform.options;//console.log(selections);输出所有的下拉框option//3~获取下拉框被选中项的索引必须是这个单词selectedIndexvar index = unform.selectedIndex;//console.log(index); //输出比如北京是1/*-------演示和解这道题无关 var val = unform[index];console.log(val); 当我获取北京时 <option value="beijing">北京</option> *///4~获取被选中项的值(注意:当通过option获取选中项的value属性值时,当有value属性时输出value值,当没有value属性时输出option的文本)var val = selections[index].value;// console.log(val);//5~获取被选中项的文本(上海/深圳直接是文本)var txt = selections[index].text;console.log(txt);//设置下拉选项默认被选中演示这里用不到//selections[2].selected = true;}/* //可以发现第二步可以不用要 //2~获取下拉框的所有下拉选项必须是这个单词optionsvar selections = unform.options;用这个也可以 var val = unform[index].value;var txt = unform[index].text;*/</script>

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。