美文网首页
事件基础

事件基础

作者: 潘肚饿兵哥哥 | 来源:发表于2020-09-12 23:33 被阅读0次

\color{rgba(254, 67, 101, .8)}{事件:}

javascript使我们有能力创建动态页面,而事件是可以被javascript侦测到的行为
简单理解:触发--响应机制

网页中的每个元素都可以产生某些可以触发javascript的时间,比如我们可以在用户点击某按钮时产生一个事件,然后执行某些操作

\color{rgba(254, 67, 101, .8)}{代码验证:点击一个按钮弹出对话框}

事件由三部分组成:事件源、事件类型、事件处理程序(事件三要素)
事件源:事件被触发的对象--谁被触发了
事件类型:事件类型--如何触发,什么事件。如鼠标点击(onclick)还是经过,还是键盘按下
事件处理程序:事件处理程序:通过函数赋值的方式完成

    <button id="btn">唐伯虎</button>
    <script>
        //点击按钮弹出对话框
        //1.事件时有三部分注册

        //1.事件源--谁被触发了
        var btn = document.getElementById('btn');
        //2.事件类型--如何触发,什么事件。如鼠标点击(onclick)还是经过,还是键盘按下
        //3.事件处理程序:通过函数赋值的方式完成
        btn.onclick = function() { //按钮(btn)被点击(onclick)
            alert('点秋香');
        }
    </script>
image.png

\color{rgba(254, 67, 101, .8)}{执行事件的步骤:}

1.获取事件源
2.注册事件(绑定事件)
3.添加事件处理程序(采取函数赋值形式)

    <div>123</div>
    <script>
        //执行事件步骤:
        //点击div  控制台输出 我被选中了
        //1.获取事件源
        var div = document.querySelector('div');
        //2.绑定事件(注册事件) div.onclick
        //3.添加事件处理程序
        div.onclick = function() {
            console.log('我被选中了');
        }
    </script>
image.png

\color{rgba(254, 67, 101, .8)}{常见鼠标点击事件:}

鼠标事件 触发条件
onclick 鼠标点击左键触发
onmouseover 鼠标经过触发
onmouseout 鼠标离开触发
onfocus 获得鼠标焦点触发
onblur 失去鼠标焦点触发
onmousemove 鼠标移动触发
onmouseup 鼠标弹起触发
onmousedown 鼠标按下触发

相关文章

  • Javascript事件系统

    本文内容 事件基础 事件监听方式 事件默认行为 事件冒泡与事件捕获 事件绑定与事件委托 事件基础 注意:本文不会深...

  • Javascript事件系统

    本文内容:事件基础事件监听方式事件默认行为事件冒泡与事件捕获事件绑定与事件委托事件基础注意:本文不会深入探究Jav...

  • View事件体系探究

    view基础坐标系 事件拦截接口 View事件分发简述 事件分发详解 MotionEvent View 基础坐标体...

  • UIButton

    目录:1、UIButton基础简介2、UIButton事件 1、UIButton基础简介 2、UIButton事件...

  • 事件基础

    事件传播机制 事件冒泡 事件从目标节点开始沿DOM树向上传播,直到document, DOM结构中的下层节点会更早...

  • 【基础】事件

    事件 html js

  • 事件基础

    javascript使我们有能力创建动态页面,而事件是可以被javascript侦测到的行为简单理解:触发--响应...

  • jQuery中的事件与动画

    一、基础事件(1)鼠标事件(2)键盘事件(3)window事件(4)表单事件 复合事件(1)鼠标光标悬停(...

  • iOS基础补完计划--透过堆栈看事件响应机制

    iOS基础补完计划--透过堆栈看事件响应机制 iOS基础补完计划--透过堆栈看事件响应机制

  • JS事件处理

    鼠标事件 事件冒泡 控件随着鼠标移动 按键事件 基础 onkeydown、onkeyup、onkeypress 小...

网友评论

      本文标题:事件基础

      本文链接:https://www.haomeiwen.com/subject/uiqmektx.html