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

Posted 2022-12-07 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