js 事件
2021-05-18 01:27
标签：func arc focus 状态 onchange 按键 element onkeydown 完成 事件汇总： onclick 当用户点击某个对象时调用的事件句柄。 onfocus 元素获得焦点。 练习：输入框 onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交. onload 一张页面或一幅图像完成加载。 onmousedown 鼠标按钮被按下。 onselect 文本被选中。 事件绑定方式： 三、事件介绍 1、onload： onload 属性开发中 只给 body元素加.这个属性的触发 标志着 页面内容被加载完成.应用场景: 当有些事情我们希望页面加载完立刻执行,那么可以使用该事件属性. 2、onsubmit： 当表单在提交时触发. 该属性也只能给form元素使用.应用场景: 在表单提交前验证用户输入是否正确.如果验证失败.在该方法中我们应该阻止表单的提交. 3、事件传播： 4、onselect： 5、onchange: 6、onkeydown: Event 对象：Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。 7、onmouseout与onmouseleave事件的区别： js 事件 标签：func arc focus 状态 onchange 按键 element onkeydown 完成 原文地址：http://www.cnblogs.com/liuxiaowei/p/7742072.html
ondblclick 当用户双击某个对象时调用的事件句柄。
onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动）
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onmouseleave 鼠标从元素离开
onsubmit 确认按钮被点击。div id="div" onclick="foo(this)">点我呀div>
script>
function foo(self){ // 形参不能是this;
console.log("点你大爷!");
console.log(self);
}
script>
p id="abc">试一试!p>
script>
var ele=document.getElementById("abc");
ele.onclick=function(){
console.log("ok");
console.log(this); // this直接用
};
script>
DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>Titletitle>
script>
/*
window.onload=function(){
var ele=document.getElementById("ppp");
ele.onclick=function(){
alert(123)
};
};
*/
function fun() {
var ele=document.getElementById("ppp");
ele.onclick=function(){
alert(123)
};
}
script>
head>
body onload="fun()">
p id="ppp">hello pp>
body>
html>
DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>Titletitle>
script>
window.onload=function(){
//阻止表单提交方式1().
//onsubmit 命名的事件函数,可以接受返回值. 其中返回false表示拦截表单提交.其他为放行.
var ele=document.getElementById("form");
ele.onsubmit=function(event) {
// alert("验证失败 表单不会提交!");
// return false;
// 阻止表单提交方式2 event.preventDefault(); ==>通知浏览器不要执行与事件关联的默认动作。
alert("验证失败 表单不会提交!");
event.preventDefault();
}
};
script>
head>
body>
form id="form">
input type="text"/>
input type="submit" value="点我!" />
form>
body>
html>
div id="abc_1" style="border:1px solid red;width:300px;height:300px;">
div id="abc_2" style="border:1px solid red;width:200px;height:200px;">
div>
div>
script type="text/javascript">
document.getElementById("abc_1").onclick=function(){
alert(‘111‘);
};
document.getElementById("abc_2").onclick=function(event){
alert(‘222‘);
event.stopPropagation(); //阻止事件向外层div传播.
}
script>
input type="text">
script>
var ele=document.getElementsByTagName("input")[0];
ele.onselect=function(){
alert(123);
}
script>
select name="" id="">
option value="">111option>
option value="">222option>
option value="">333option>
select>
script>
var ele=document.getElementsByTagName("select")[0];
ele.onchange=function(){
alert(123);
}
script>
事件通常与函数结合使用，函数不会在事件发生前被执行！event对象在事件发生时系统已经创建好了,并且会在事件函数被调用时传给事件函数.我们获得仅仅需要接收一下即可.比如onkeydown,我们想知道哪个键被按下了，需要问下event对象的属性，这里就时KeyCode.input type="text" id="t1"/>
script type="text/javascript">
var ele=document.getElementById("t1");
ele.onkeydown=function(e){
e=e||window.event;
var keynum=e.keyCode;
var keychar=String.fromCharCode(keynum);
alert(keynum+‘----->‘+keychar);
};
script>
DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>Titletitle>
style>
#container{
width: 300px;
}
#title{
cursor: pointer;
background: #ccc;
}
#list{
display: none;
background:#fff;
}
#list div{
line-height: 50px;
}
#list .item1{
background-color: green;
}
#list .item2{
background-color: rebeccapurple;
}
#list .item3{
background-color: lemonchiffon;
}
style>
head>
body>
p>先看下使用mouseout的效果:p>
div id="container">
div id="title">使用了mouseout事件↓div>
div id="list">
div class="item1">第一行div>
div class="item2">第二行div>
div class="item3">第三行div>
div>
div>
script>
// 1.不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。
// 2.只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。
var container=document.getElementById("container");
var title=document.getElementById("title");
var list=document.getElementById("list");
title.onmouseover=function(){
list.style.display="block";
};
container.onmouseleave=function(){ // 改为mouseout试一下
list.style.display="none";
};
/*
因为mouseout事件是会冒泡的，也就是onmouseout事件可能被同时绑定到了container的子元素title和list
上，所以鼠标移出每个子元素时也都会触发我们的list.style.display="none";
*/
/*
思考:
if:
list.onmouseout=function(){
list.style.display="none";
};
为什么移出第一行时,整个list会被隐藏?
其实是同样的道理,onmouseout事件被同时绑定到list和它的三个子元素item上,所以离开任何一个
子元素同样会触发list.style.display="none";
*/
script>
body>
html>
下一篇：一款好用的js插件及工具包