一. DOM 事件格式
元素对象. on 事件名称 = function(){
- // 事件发生时, 执行的代码
- }
onclick 当用户点击某个对象时调用的事件句柄.
ondblclick 当用户双击某个对象时调用的事件句柄.
onfocus 元素获得焦点. // 练习: 输入框
onblur 元素失去焦点. 应用场景: 用于表单验证, 用户离开某个输入框时, 代表已经输入完了, 我们可以对它进行验证.
onchange 域的内容被改变. 应用场景: 通常用于表单元素, 当元素内容被改变时触发.(三级联动)
onkeydown 某个键盘按键被按下. 应用场景: 当用户在最后一个输入框按下回车按键时, 表单提交.
onkeypress 某个键盘按键被按下并松开.
onkeyup 某个键盘按键被松开.
onload 一张页面或一幅图像完成加载.
onmousedown 鼠标按钮被按下.
onmousemove 鼠标被移动.
onmouseout 鼠标从某元素移开.
onmouseover 鼠标移到某元素之上.
onmouseleave 鼠标从元素离开
onselect 文本被选中.
onsubmit 确认按钮被点击.
- eg1: onfocus onblur onmouseover onmouseout
- <body>
- <form action=""id="from1">
- <input type="text" name="username" value="请输入用户名"><span style="font-style: italic"></span>
- <p></p>
- <input type="text" name="passwd" value="请输入密码">
- <p></p>
- <input type="submit" value="提交">
- </form>
- <h1 id="one"> 点击我领取屠龙宝刀!</h1>
- <script>
- ele_form = document.getElementById("from1");
- ele_form.onsubmit=function(){
- console.log(this)
- // 阻止事件方式 1 false 表示拦截表单提交 其他放行
- return false;
- };
- ele_form.onsubmit=function(event){
- console.log(this)
- // 阻止事件方式 2 event.preventDefault
- event.preventDefault();
- };
- var name_ele = document.getElementsByName("username")[0];
- // 获得焦点时执行
- name_ele.onfocus = function () {
- // 函数中 name_ele 可以用 this 替代
- if (this.value == "请输入用户名") {
- //if (name_ele.value == "请输入用户名") {
- name_ele.value = "";
- ele_span = name_ele.nextElementSibling;
- ele_span.innerhtml = "SB";
- console.log(ele_span);
- }
- console.log(name_ele.value);
- };
- // 失去焦点执行
- name_ele.onblur = function () {
- if (!name_ele.value.trim()) {
- name_ele.value = "请输入用户名";
- ele_span = name_ele.nextElementSibling;
- ele_span.innerHTML = "";
- }
- console.log(name_ele.value);
- };
- console.log(name_ele.value);
- var btn = document.getElementById("one");
- btn.onclick = function () {
- alert("我是渣渣辉, 是兄弟就来砍我");
- };
- /* mouseover 鼠标停留的时候 */
- btn.onmouseover = function () {
- btn.style.color = "red";
- };
- /* mouseout 鼠标离开的时候 */
- btn.onmouseout = function () {
- btn.style.color = "blue";
- };
- </script>
Event 对象
Event 对象代表事件的状态, 比如事件在其中发生的元素, 键盘按键的状态, 鼠标的位置, 鼠标按钮的状态.
事件通常与函数结合使用, 函数不会在事件发生前被执行! event 对象在事件发生时系统已经创建好了, 并且会在事件函数被调用时传给事件函数. 我们获得仅仅需要接收一下即可.
比如 onkeydown, 我们想知道哪个键被按下了, 需要问下 event 对象的属性, 这里就时 KeyCode;
思考: onclick=function(event){}; 这个方法是谁调用的?
事件传播:
- <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>
参考:
- https://www.cnblogs.com/chichung/p/9688399.html
- https://www.cnblogs.com/yuanchenqi/articles/5980312.html
来源: http://www.bubuko.com/infodetail-2980959.html