jQuery与原生js在点击事件上的区别

Posted 2021-11-03 Rose✿留白ق೨

1、jQuery的点击事件

//$()是jquery的选择器
let star = $(".bi-star");

//click()是jquery的事件
star.click(function () {
    // hasClass()、removeClass()和addClass()是jquery的方法
    if(star.hasClass('bi-star')){
        star.removeClass('bi-star').addClass('bi-star-fill');
    }else if(star.hasClass('bi-star-fill')){
        star.removeClass('bi-star-fill').addClass('bi-star');
    }
});

2、原生js的点击事件
1）方式一：

let star = document.querySelector(".bi-star");

star.addEventListener("click",toggle);

function toggle() {
    star.style.color = "red";
}

2）方式二：

let star = document.querySelector(".bi-star");

star.onclick = function () {
    star.style.color = "red";
}

3、注意
两者之间在标签的获取和事件的处理上不同，不可混合使用。
以下是错误示范：

//$()是jquery的选择器
let star = $(".bi-star");

star.onclick = function(){
    if(star.hasClass('bi-star')){
        star.removeClass('bi-star').addClass('bi-star-fill');
    }else if(star.hasClass('bi-star-fill')){
        star.removeClass('bi-star-fill').addClass('bi-star');
    }
}

onclick()不是jQuery的方法。

读者可参考【学习笔记】jQuery