JavaScript 学习之--------函数 异常 事件冒泡 默认事件

最新推荐文章于 2024-03-04 15:35:45 发布
最新推荐文章于 2024-03-04 15:35:45 发布
阅读量193 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40791843/article/details/93384364
版权

一.函数

  1. 函数
    　1.1 定义函数：
    　function 函数名(){
    　 　函数体;(代码块)
    　}
    　1.2 function必须小写，函数调用时，也必须按照函数的相同名称来调用函数；
    　1.3 函数名通常小写；
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    var a = 10;
    var b = 20;
    var sum = a + b;
    alert(sum);
</script>

</body>
</html>

在这里插入图片描述
创建函数：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    function demo(a,b) {
        var sum = a + b;
        return sum;
    }
    var v1 = demo(10,10);
    alert(v1);
</script>

</body>
</html>

在这里插入图片描述

  1. 函数调用
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    function demo(a,b) {
        var sum = a + b;
        alert(sum)
    }
    //函数调用 方式一
    demo(10,20);
</script>
<!--方式三-->
<button onclick="demo(1,4)"> 按钮</button>
<!--方式二-->
<form>
    <input type="button" value="按钮" onclick="demo(10,30)">
</form>

</body>
</html>
  1. 带参数的函数：例如，demo(arg1,arg2)
  2. 全局变量与局部变量
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    var n = 10;//局部变量
    m = 20;//全局变量
    function demo() {
        var a = 1;//局部变量
        //b这个全局变量 当demo方法调用之后 才会生效
        b = 2;//全局变量
    }
    demo();
    alert(b);
</script>

</body>
</html>

二.异常

  1. 异常：JavaScript引擎执行JavaScript代码时，发生了错误，导致程序停止执行；
  2. 异常抛出：当异常产生，并且将这个异常生成一个错误信息；
  3. 异常捕获：
    　3.1　try catch 捕获
    　 try{
    　　　发生异常的代码块；
    　　}catch(err){
    　　　错误信息处理；
    　　}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    function demo() {
        try{
            alert(str);  
        }catch (err) {
            alert(str);
        }
    }
    demo();
</script>
</body>
</html>

3.2 Throw 抛出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<from>
    <input type="text" id="txt">
    <input id="btn" type="button" onclick="demo()" value="按钮">
</from>
<script>
    function demo() {
        try {
            var e = document.getElementById("txt").value;
            if (e == ""){
                throw "请输入";
            }
        }catch (err) {
            alert(err);
        }
    }
    demo();
</script>
</body>
</html>

在这里插入图片描述

三.JavaScript事件

  1. 什么是事件？
    　事件是可以被JavaScript检测到的行为，比如鼠标点击
  2. 主要事件：
    在这里插入图片描述
    　2.1 onclick事件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--点击按钮弹出 对话框 鼠标点击事件-->
<button onclick="demo()">按钮</button>
<script>
    function demo() {
        alert("Hello");
    }
</script>
</body>
</html>

－
　　2.2 onchange事件

<form >
    <input type="text" onchange="changeDemo(this)"> // 等价于"alert('Hello,内容改变了')"
</form>
<script>
    function changeDemo(bg) {
        alert("Hello,内容改变了");
    }
</script>

×
　　2.3 onselect事件

<form >
    <input type="text" onselect="changeDemo(this)">
</form>
<script>
    function changeDemo(bg) {
        bg.style.background = "red";
    }
</script>

在这里插入图片描述
　　2.4 onfocus事件

<form >
    <input type="text" onselect="changeDemo(this)" onfocus="changeDemo1(this)">
</form>
<script>
    function changeDemo(bg) {
        bg.style.background = "red";
    }
    function changeDemo1(bg) {
        bg.style.background = "blue";
    }
</script>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件</title>
    <link rel="stylesheet" type="text/css" href="2..css">
</head>
<body onload="demo()">
<script>
    function demo() {
        alert("网页加载完毕")
    }
</script>
</body>
</html>

在这里插入图片描述
3. 事件处理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件处理</title>
</head>
<body>
<div id="div">
    <button id="btn1">按钮</button>
    <a href="https:\\www.baidu.com" id="aid">百度一下</a>
</div>

<script>
    //事件冒泡 点击按钮弹出两个对话框 我们得到的id点击按钮是 btn1 id  这是因为 div中 包含 button 的 btn1 id
    document.getElementById("btn1").addEventListener("click",demo);
    //冒泡依次向上传递 传递给div
    document.getElementById("div").addEventListener("click",showDiv);


    document.getElementById("aid").addEventListener("click",showA);
    function demo(e) {
        //alert(e.type);//   click  获取事件类型
        //alert(e.target); //   [object HTMLButtonElement]  html中的button元素  获取事件目标
        //e.stopPropagation();//阻止事件冒泡
        alert("hello");
    }
    function showDiv() {
        alert("div");
    }
    function showA(e) {
        e.stopPropagation();
        e.preventDefault();//阻止事件默认行为 点击a标签的按钮 不会跳转到百度
    }

    var btn1 = document.getElementById("btn1");

    //addEventListener 等价于 attachEvent
    //removeEvent  等价于  detachEvent
    if (btn1.addEventListener) {
        btn1.addEventListener("click", demo1);
    } else if (btn1.attachEvent) {
        btn1.detachEvent
        btn1.attachEvent("onclick", demo1);
    } else {
        btn1.onclick = demo1();
    }

    function demo1() {
        alert("hello1");
    }


    btn1.addEventListener("click",demo1);//添加监听事件，不会覆盖掉其他的事件
    btn1.addEventListener("click",demo2);
    btn1.addEventListener("click",demo3);
    function demo1() {
        alert("hello1");
    }
    function demo2() {
        alert("hello2");
    }
    function demo3() {
        alert("hello3");
    }
    btn1.removeEventListener("click",demo2);//移除事件


</script>

</body>
</html>
小白葫芦
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript——DOM事件流
shhghvvh的博客
11-25 1049
事件流描述的是从页面中接收事件的顺序。事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。DOM事件流中有三个阶段：捕获阶段，当前目标阶段，冒泡阶段。
详解vue中v-on事件监听指令的基本用法
10-15
有时候，事件处理函数需要访问事件对象，Vue允许在方法名后加上括号，以传递事件参数： ```html ($event)">点击我 ``` ```javascript methods: { handleClick(event) { console.log('点击事件触发了', event); ...
JavaScript HTML DOM 事件
weixin_34112030的博客
07-06 86
HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。 我们可以在事件发生时执行 JavaScript，比如当用户在 HTML 元素上点击时。 如需在用户点击某个元素时执行代码，请向一个 HTML 事件属性添加 JavaScript 代码： onclick=JavaScript HTML 事件的例子： 当用户点击鼠标时 当网页已加载时 当图像已加载时 ...
冒泡排序和异常
digital_sun的博客
07-26 392
冒泡排序 冒泡排序 冒泡排序算法的原理如下： 比较相邻的元素。如果第一个比第二个大，就交换他们两个 对每一对相邻元素做同样的工作，从开始第一对到结尾的最后一对。 持续每次对越来越少的元素重复上面的步骤，直到没有任何一对数字需要比较。 冒泡排序的时间复杂度为O（n^2） 异常 1.jvm会处理程序中未处理的异常： a：暂停程序 b：报错(异常内容【什么异常 原因描述】 异常行数 ) 不要让j...
jQuery事件---阻止冒泡和默认行为
热门推荐
Twilight's Blog
06-16 1万+
冒泡如果在页面中重叠了多个元素，并且重叠的这些元素都绑定了同一个事件，那么就会出现冒泡问题。例如：<body> <div style="width:300px;height:300px;background-color:skyblue;"> <input type="button" value="button"/> </div> </body>如果document、d
JavaScript DOM 事件
fagdg的博客
05-06 491
一、监听事件 1、添加监听事件 window.addEventListener('load', function () { alert('添加监听事件'); }, false); 2、删除监听事件 window.addEventListener('load', function () { alert('删除监听事件'); }, false); 3、try - catch - finally try { oBtn.add...
VueJS事件处理器v-on的使用方法
10-19
在方法内部，可以访问到原始的DOM事件对象`event`，可以使用它来操作事件，比如`event.preventDefault()`阻止默认行为或`event.stopPropagation()`阻止事件冒泡。 7. **事件修饰符与原生事件**： 当需要同时处理...
对Vue.js之事件的绑定(v-on: 或者 @ )详解
10-18
例如，`.prevent`可以阻止事件的默认行为，`.stop`可以阻止事件的冒泡。 4. **事件对象** 当事件触发时，Vue会自动传递一个事件对象到事件处理器。这个对象包含了关于事件的详细信息，如`event.target`（触发事件...
js事件机制----捕获与冒泡机制实例分析
10-15
**addEventListener()** 方法是JavaScript中用于绑定事件处理函数的主要方式，它接受三个参数：事件名称、处理函数和一个布尔值，用于指定事件是在捕获阶段还是冒泡阶段执行。例如： ```javascript element....
关于javascript冒泡与默认事件的使用详解
09-05
JavaScript中的冒泡与默认事件是理解事件处理机制的关键概念，尤其在构建交互式的网页应用时。本文将深入探讨这两个概念，并通过示例代码进行详细解释。 首先，让我们了解什么是事件冒泡。事件冒泡是指当一个事件...
JavaScript之DOM事件
Pinyk的博客
02-21 136
一、概念 某些组件被执行了某些操作后，触发某些代码的执行，详解如下： 事件：某些操作，如：单击，双击，键盘被按下，鼠标移动了。 事件源：组件，如按钮，文本输入框等 监听器：代码 注册监听：将事件，事件源，监听器结合在一起，当事件源上发生了某个事件，则触发执行某个监听器代码 二、常见事件 1.点击事件 1.onclick：单击事件 2.ondblclick：双击事件 2.焦点事件 1.onblu...
JavaScript中DOM事件
qq_44682019的博客
10-01 370
DOM事件 什么是事件？ 事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。主要有HTML事件和DOM事件。 HTML事件：直接在HTML元素标签内添加事件，执行脚本。 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .btn{width:140px;hei
JavaScript中的DOM事件
qq_39233029的博客
08-02 208
DOM事件 DOM 什么是DOM？，JavaScript由ECMA、DOM、BOM三部分组成，其中ECMA是JS的基础语法，规定了JS的关键字，运算符，数据类型，变量的声明，语法等。BOM是浏览器对象模型的缩写（BrowserObjectMode），核心对象是 window,它表示浏览器的一个实例，也是ECMAScript规定的Globle对象，是各个浏览器厂商根据DOM在各自浏览器上的实现，...
异常和日志（还有冒泡和希尔排序）
zhangzezhao123的博客
06-26 133
1.异常：即便Python程序的语法是正确的，在运行它的时候，也有可能发生错误。运行期检测到的错误。2.写法如下try: 语句体except 异常类型: 处理语句except 异常类型:（可多次写不同类型） 处理语句3.finally:一定会执行def appa(): try: a=int(input('输入一个数')) b=int(input('输入另...
Javascript DOM 事件 —— 【事件注册、删除事件、DOM事件流、事件对象、事件委托】
impact_factor的博客
07-23 650
Javascript 事件流
JavaScript DOM中的事件对象
每天学习一点点
11-24 213
当触发DOM上的某个事件时，会产生一个事件对象event，在这个对象中包含所有与事件有关的信息，包括导致事件的元素、事件的类型，以及其他与特定事件相关的信息。所有浏览器都支持event对象，但支持方式不同。 实例一： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&...
JavaScript中DOM的常见事件
最新发布
weixin_51898654的博客
03-04 344
在DOM（文档对象模型）中，事件是可以被用户或浏览器触发的不同的动作。这些事件可以用来交互式地修改网页或触发JavaScript代码。
el-input中clear如何不触发click事件
08-20
我们可以在click事件的回调函数中加入event.stopPropagation()，这样当点击clear按钮时，事件会被阻止冒泡，从而不会触发click事件。 方法二是利用@click.native事件。我们可以使用@click.native事件来替代click...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值