事件触发方式

最新推荐文章于 2025-05-28 11:29:07 发布

July-Mao

最新推荐文章于 2025-05-28 11:29:07 发布

阅读量4.5k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/mf_happying/article/details/79065738

javascript 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了HTML中常见的事件类型及其应用场景，如onclick、onfocus等，并通过实例展示了如何利用JavaScript实现表单验证、阻止事件传播等功能。此外，还介绍了如何通过JavaScript进行DOM元素的增删改查操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.event事件
onclick-当用户点击某个对象的时候调用的事件的句柄
ondblclick-当用户双击某个对象的时候调用的事件的句柄
onfocus-元素获得焦点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function fun() {
            alert(111)
        }
    </script>
</head>
<body>
    <input type="text" onfocus="fun()">//点击触发
</body>
</html>

1.输入框不输入的时候显示“请输入用户名”–可以用于表单验证，用户离开某个输入框的时候代表已经输入完了，我们可以对他进行验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input class="keyword" type="text" onfocus="fun()" onblur="func()" value="请输入用户名">//onblur元素失去焦点
    <input type="button" value="提交" >
</body>
</html>
<script>
    function fun() {
        var ky=document.getElementsByClassName("keyword")[0]
        ky.value="";
    }
    function func() {
        var ky=document.getElementsByClassName("keyword")[0]
        if(ky.value.trim().length==0){//trim去掉空格
            ky.value="请输入用户名"
        }
    }
</script>

2.onchange-域的内容被改变，通常用于表单元素，当元素内容被改变时触发(没联动)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <select onchange="fun3()">
        <option>上海</option>
        <option>北京</option>
        <option>河北</option>
    </select>
</body>
</html>
<script>
    function fun3(){
        alert(123)
    }
</script>

3.onkeydown-某个键盘按键被按下，用户在最后一个输入框按下回车键时，表单提交

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="button" value="press" onkeydown="func1(event)">
</body>
</html>
<script>
    function fun1(){
        alert(e.keyCode)
    }
</script>

onkeypress-某个按键被按下并被松开
onload-一张页面或者一副图片完成加载
onmousedown-鼠标被按下
onmousemove-鼠标被移动
onmouseout-鼠标从某元素移开
onmouseover-鼠标移到某元素上
onsubmit-提交，是当表单在提交时触发，该属性只在form元素使用，应用场景就是在表单提交之前验证用户输入是否正确，正确则提交；失败则阻止提交
4.应用-监听事件–阻止表单的提交的两种方式
方式一:

<body>
    <form id="form" onsubmit="check(event)">
        <input type="text" name="usename">
        <input type="submit" value="submit">
    </form>
</body>
</html>
<script>
    function  check(event) {
        event.preventDefault()//阻止给后端提交数据，假如没有这句，form表单会把输入的数据提交

    }
</script>

方式二:

<body>
    <form id="form" onsubmit="return check()">
        <input type="text" name="usename">
        <input type="submit" value="submit">
    </form>
</body>
</html>
<script>
    var Form=document.getElementById("form")
    Form.onsubmit=function(event) {
        alert("验证失败")
        return false
    }
</script>

5.事件传播及阻止方式

<body>
    <div id="div1" onclick="alert('div1')" style="border: 1px;background-color:red;width: 300px;height: 300px">
        <div id="div2" onclick="alert('div2')" style="border: 1px;background-color:green;width: 100px;height: 100px">
        </div>
    </div>
</body>

现象：点击红色部分弹出div1.点击绿色部分弹出div2,div1
那么如何阻止事件向外层传播

<body>
    <div id="div1" onclick="alert('div1')" style="border: 1px;background-color:red;width: 300px;height: 300px">
        <div id="div2" onclick="fun(event)" style="border: 1px;background-color:green;width: 100px;height: 100px">
        </div>
    </div>
</body>
</html>
<script>
    function fun(e) {
        alert('div2')
        e.stopPropagation()
    }
</script>

现象：点击红色部分弹出div1.点击绿色部分弹出div2
6.增删改查

<body>
    <div id="div1">
        <div id="div2" >hello div2</div>
        <p>hello p</p>
    </div>
    <input type="button" value="添加p" onclick="add()">
    <input type="button" value="删除" onclick="remove()">
    <input type="button" value="改" onclick="change()">
</body>
</html>
<script>
    function add() {
        var ele=document.getElementById("div1")
        var son=document.createElement("p")//添加p标签
        son.innerHTML="hello ppp"
        ele.appendChild(son)
    }
    function remove() {
        var ele=document.getElementById("div1")
        var last_son=ele.lastElementChild
        ele.removeChild(last_son)//删除最后一个元素

    }
    function change() {
        var ele=document.getElementById("div1")
        var son=ele.lastElementChild
        son.innerHTML="<em>hello world</em>"
        ele.style.fontSize="35px"
    }
</script>

7.添加图片

<body>
    <div class="div1">hello div</div>
    <input id="add" type="button" value="add">
</body>
</html>
<script>
    var ele=document.getElementById("add")
    ele.onclick=function () {
        var div1=document.getElementsByClassName("div1")[0]
        var img=document.createElement("img")//创建新的元素标签
        img.setAttribute("src","123.png");
        div1.appendChild(img)
    }
</script>

8.阻拦页面跳转

//方式一
<a href="#" >hello</a>
//方式二  利用void()阻拦跳转，也可以void(show)，还能阻拦函数返回值
<a href="javascript:void(0)" >hello1</a>
//补充  点击此标签会执行javascript里面的函数
//javascript是一个伪协议
<body>
    <a href="javascript:show()" >hello21</a>
</body>
</html>
<script>
    function show() {
        alert(123)
    }
</script>

9.this的用法-触发当前对象，方便定位标签

<body>
    <div id="div1">hello1
        <div >hello2
            <div onclick="show(this)" coco="123">abc</div>
            <p>hellop</p>
        </div>
        <a href="csss.html">aaa</a>
    </div>

</body>
</html>
<script>
 function show(self) {//此处不用this就可以，self
     console.log(self.getAttribute("coco"))

 }
</script>