53-dom中的事件

山东大葱

已于 2022-03-08 21:09:30 修改

阅读量99

点赞数

分类专栏： JavaWeb 文章标签： linq p2p html

于 2021-12-09 20:25:47 首次发布

本文链接：https://blog.csdn.net/shwjakak/article/details/121840385

版权

JavaWeb 专栏收录该内容

89 篇文章 1 订阅

订阅专栏

<form action="#" id="form" οnclick="return checkform()">
   function checkform(){
    return false;
   }
<!--οnclick="false"   注意这里想想看 其实就是方法返回了false字符串在引号里-->

## 事件监听机制：
   * 概念：某些组件被执行了某些操作后，触发某些代码的执行。比如单击onclick执行
       * 事件：事件就是某些操作。如：单击，双击，键盘按下了，鼠标移动了
       * 事件源：组件。如：按钮文本输入框... 事件的组件是比如按钮一些html标签
       * 监听器：js代码。就是触发事件的代码比如说当我们再事件源上点击了事件 function中的代码会被执行
       * 注册监听：将事件，事件源，监听器结合在一起。当事件源上发生了某个事件，则触发执行某个监听器代码。

   * 常见的事件：都是on开头的
       1. 点击事件：
           1. onclick：单击事件
           2. ondblclick：双击事件
       2. 焦点事件光标闪点外面光标不闪
           1. onblur：失去焦点
           2. onfocus:元素获得焦点。

3. 加载事件：
1. onload：一张页面或一幅图像完成加载。

       4. 鼠标事件： onmousexxx
           1. onmousedown   鼠标按钮被按下。
           2. onmouseup   鼠标按键被松开。
           3. onmousemove   鼠标被移动。
           4. onmouseover   鼠标移到某元素之上。
           5. onmouseout   鼠标从某元素移开。


       5. 键盘事件： onkeyxxx
           1. onkeydown   某个键盘按键被按下。
           2. onkeyup       某个键盘按键被松开。
           3. onkeypress   某个键盘按键被按下并松开。

       6. 选择和改变
           1. onchange   域的内容被改变。
           2. onselect   文本被选中。

       7. 表单事件：
           1. onsubmit   确认按钮被点击。表单提交的一个事件
           2. onreset   重置按钮被点击。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常见事件</title>
    <script>
        /*
       * 常见的事件：都是on开头的
        1. 点击事件：
            1. onclick：单击事件
            2. ondblclick：双击事件
        2. 焦点事件  光标闪  点外面光标不闪
            1. onblur：失去焦点
一般用于表单校验 比如输入密码时候一点外面失去焦点就校验一下有没有用户名有没有错误
            2. onfocus:元素获得焦点。

        3. 加载事件：
            1. onload：一张页面或一幅图像完成加载。
页面或者窗口整个加载完成了就会触发整个onload事件

        4. 鼠标事件：
            1. onmousedown    鼠标按钮被按下。
                注意看下面的例子
                这里定义function时定义一个形参，接受event对象
                event对象的button属性可以获取鼠标的哪个键被点击了
            2. onmouseup    鼠标按键被松开。
            3. onmousemove    鼠标被移动。
            4. onmouseover    鼠标移到某元素之上。
            5. onmouseout    鼠标从某元素移开。
            
            
        5. 键盘事件：
            1. onkeydown    某个键盘按键被按下。    
            2. onkeyup        某个键盘按键被松开。
            3. onkeypress    某个键盘按键被按下并松开。

        6. 选择和改变
            1. onchange    域的内容被改变。
            2. onselect    文本被选中。

        7. 表单事件：
            1. onsubmit    确认按钮被点击。
可以阻止表单的提交
            2. onreset    重置按钮被点击。
     */
    </script>
    <script>
        //加载完成事件 onload  支持该事件的对象 image window layer input标签就可以写在script标签下面 等着页面加载完毕再执行script标签中的内容
        window.onload=function () {  //这里的意思是window窗口界面加载完成了再执行function中的内容
            /*//失去焦点事件  之前整个不能写在这里因为input标签在下面 加载不出来input标签这里会报错
            document.getElementById("username").onblur=function () {
                alert("失去焦点了");  //前面定义了一个input文本框 点击文本框再点击外面会弹出失去焦点
            }*/

            /*绑定鼠标事件  onmouseover    鼠标移到某元素之上。
               document.getElementById("username").onmouseover=function() {
              alert("鼠标来了"); //当鼠标移动到input标签上面弹出鼠标来了
             }*/
            /* document.getElementById("username").onmousemove=function(){
                    alert("鼠标移动了"); //当鼠标在input标签移动弹出鼠标移动了
            }*/

          /* document.getElementById("username").onmousedown=function(){
                alert("鼠标点击了"); //当鼠标在input标签里面点击弹出鼠标点击了  鼠标上的左右键 鼠标滚轮都能触发
            }*/


         /* //看哪个鼠标按钮被点击了//鼠标按下会自动调用function();方法 会传一个event对象 接收整个event对象来操作一些属性
            document.getElementById("username").onmousedown=function(event){
                alert(event.button); //alert弹出左键0 中键1 右键2
            }*/

          //键盘事件
            document.getElementById("username").onkeydown=function (event) {
           // alert(event.keyCode); //按键盘会弹出数字
                if (event.keyCode==13){
                    alert("提交表单");  //按下enter会弹出提交表单
                }
            }

            //onchange域的内容被改变会触发
            document.getElementById("username").onchange=function () {
                alert("内容改变了"); //内容被改变会触发   一般作用于下拉列表
            }
            //下拉列表绑定onchange事件
            document.getElementById("city").onchange=function () {
                alert("内容改变了"); //内容被改变会触发 选择列表也会弹出内容改变了
            }

            //专门用于表单提交的事件
            //onsubmit    确认按钮被点击。可以阻止表单的提交   方法返回false则表单被阻止提交
            document.getElementById("form").onsubmit=function () {
           //校验用户名格式是否正确
                var flag=false;
                return flase;
// 如果只定义flag= false 或 true  表单都会提交 但是定义了返回值返回false会阻止不提交，返回true才会提交
            }

            //上述阻止表单提交第二种方法 在form标签中定义属性
            function checkform(){
                return false;
            }
        }
    </script>
</head>
<body>
<!--
 function fun(){  // 注意下面代码的意思时会自己生成一个方法调用checkform();
  checkform();  //所以要return checkform()；
  }
-->
<form action="#" id="form" onclick="return checkform()">   <!--onclick="false"   注意这里想想看 其实就是方法返回了字符串在引号里-->
<input name="username" id="username">
<select id="city">
    <option>请选择城市列表</option>
    <option>北京</option>
    <option>上海</option>
    <option>天津</option>
    <option>西安</option>
</select>
<input type="submit" value="提交">
</form>

</body>
</html>

注意上面这个图片是下拉列表注意form表单标签内的东西会被提交

格式：

<select id="city">
<option>请选择城市列表</option>
<option>北京</option>
<option>上海</option>
<option>天津</option>
<option>西安</option>
</select>

山东大葱

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
53-dom中的事件

<form action="#" id="form" onclick="return checkform()"> function checkform(){ return false; }## 事件监听机制： * 概念：某些组件被执行了某些操作后，触发某些代码的执行。 * 事件：事件就是某些操作。如：单击，双击，...
复制链接

扫一扫

专栏目录

53-dom中 的事件

53-dom中的事件