js事件处理 内置对象 String字符串对象

本文深入解析JavaScript中的各种事件处理方式,包括HTML事件处理、DOM0级、DOM2级及IE事件处理,并探讨了事件捕获与冒泡的概念。同时,文章还介绍了JavaScript内置对象的使用,如字符串对象的属性和方法,以及如何自定义对象。

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

事件处理
1.HTML事件处理
    直接添加到HTML结构中
注意点    后期修改的时候 很麻烦

2.DOM0级事件处理
    把一个函数赋值给一个事件处理程序属性
注意点    会被覆盖掉,编写方便

3.DOM2级事件处理
    addEventListener("事件名","事件处理函数","布尔值");
    true:事件捕获
    false:事件冒泡
    removeEvenListener();
注意点    不会被覆盖,但是编写语句比较长
4.IE事件处理程序
    attachEvent
    detachEvent

<body>
    <div id="div">
        <button id="btn1">button</button>
    </div>
<!--html事件处理   <script type="text/javascript">
        function demo(){
            alert("html事件处理");     '缺点   更改函数名时  上方联系的函数名也需要更改'
        }
    </script>    -->
<!--DOM0级事件处理    <script type="text/javascript">
        var btn1 =document.getElementById('btn1');
        btn1.onclick=function(){alert("DOM0级事件处理程序1")};
        btn1.onclick=function(){alert("DOM0级事件处理程序2")};  //覆盖上面的2
        btn1.onclick=null;     //清除作用
    </script>    -->
<!--DOM2级事件处理    <script type="text/javascript">
        var btn1 = document.getElementById("btn1");
        btn1.addEventListener("click",demo1);
        btn1.addEventListener("click",demo2);  //addEventListener的第二个参数不需要添加()   !!!!!如果添加括号()打开网页 会直接执行这个函数
        function demo1(){
            alert("DOM2级事件处理程序1");
        }
        function demo2(){
            alert("DOM2级事件处理程序2");
        }                            //证明上面的不会被覆盖
        btn1.removeEventListener("click",demo2);    //清除btn1.addEventListener("click",demo2);
    </script>-->
<!--老旧通吃-->    <script type="text/javascript">
        var btn1 = document.getElementById("btn1");
        if (btn1.addEventListener) {
            btn1.addEventListener("click",dom2);
        }else if (btn1.attachEvent) {
            btn1.attachEvent("click",ie);
        }else if (btn1.onclick) {
            btn1.onclick=dom0();
        }
        function dom0(){
            alert("DOM0级事件处理");
        }
        function ie(){
            alert("IE事件处理");
        }
        function dom2(){
            alert("DOM2级事件处理");
        }

    </script>
</body>
#############################################

JavaScript内置对象

####什么是对象
1.什么是对象
    JavaScript 中的所有事物都是对象:字符串,数值,数组,函数...
    每个对象带有属性和方法
    JavaScript 允许自定义对象
2.自定义对象:
    1)定义并创建对象实例
    2)使用函数来定义对象,然后创建新的对象实例
<body>
    <!--创建对象-->
    <script type="text/javascript">

//直接创建方法1        people = new Object();
//                    people.name="Peiqi";
//                    people.age="64";
//                    document.write("name:"+people.name+",age"+people.age);
//直接创建方法2        people = {name:"tom",age:"54"};
//                    document.write("name:"+people.name+",age"+people.age);
//使用函数创建对象
//    function people(name,age){
//        this.name=name;
//        this.age=age;  //通过this进行索引
//    }
//    son = new people("wfaq",30);
//    document.write("name:"+son.name+",age"+son.age);
####String字符串对象
1.String    
    string对象用于处理已有的字符串
    字符串可以使用双引号或单引号
2.在字符串中查找字符串:
    indexOf("XXX")        //    查询XXX从哪里开始的(查询不到时 返回“-1”)
    var str ="HELLO!WORLD! 你好!世界!";
    document.write(str+"字符串长度为:"+str.length+"<br/>");
    document.write(str.indexOf("."));
3.内容匹配:
    match()
    var str = "HELLO!WORLD!";
    document.write(str.match("WORLD")); 
4.替换内容
    replace()
    var str="HELLO!WORLD!"
    document.write(str.replace("WORLD","佩奇"))
5.字符串大小写转换:
    toUpperCase()    ' 大写/toLowerCase()    ‘ 小写
    var str = "Hello World";
    document.write(str.toUpperCase());    
6.字符串转为数组:
    strong>split()
    var str="Hello,ton,jack";
    var s=str.split(",");
    document.write(s[1]);    '数组是从0开始计数的
****字符串属性和方法:
    1)属性:length,prototype,constructor
    2)方法:charAt(),charCodeAt(),concat(),fromCharCode(),indexOf(),lastindexOf(),match(),replace(),search(),slice(),substring(),substr(),valueOf(),toLowerCase(),toUpperCase(),split()

 

我的sublime在HTML中编写js时没有提示语句

不知道解决方法的我 在最后一行加了

<!--addEventListener removeEventListner attachEvent detachEvent getElementById alert document write click onclick function var else charAt() charCodeAt() concat() fromCharCode() indexOf() lastindexOf() match() replace() search() slice() substring() substr() valueOf() toLowerCase() toUpperCase() split() length prototype constructor-->

还能凑合凑合

之后应该有解决方法  现在先学

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

99Kies

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值